반응형

리액트 2

리액트 react setState는 비동기로 동작한다.

리액트의 가장 기본적이고 핵심적인 상태값을 변경하는 setter 함수(메소드)에 대해서 정리하고자 한다.이 setter 메소드는 클래스형 컴포넌트라면 this.setState가 빌트인 되어 있고 함수형 컴포넌트라면 직접 정의해서 사용할 수 있다.클래스 방식이나 함수형 모두 글의 맥락을 보면 동일하므로 여기에서는 클래스형 컴포넌트를 사용하여 설명한다.그러면 왜 setState는 비동기로 동작할까?리액트에서는 상태값은 아주 핵심적이고 특별하다. 어떤 상태값이 변경되면 그 영향하에 있는 컴포넌트들은 렌더링이 된다. 그리고 어떤 컴포넌트가 렌더링되면 그 하위 컴포넌트들 역시 리렌더링 된다. 이렇게 연쇄직인 방법으로 데이터의 변화가 돔 요소에 실시간으로 반영되어 우리에게 보여지는 것이다.그러면 왜 setState..

클래스 컴포넌트와 함수 컴포넌트에 대한 간단한 비교 정리.

예전처럼 공들여 블로그 글을 쓰기가 귀찮다. 그래서 대략적으로만 정리하려 한다.리액트의 고전적인 클래스 컴포넌트와, 훅의 등장으로 새롭게 관심 받는 함수형 컴포넌트를 비교하기 위해 글을 쓴다. 보통 함수형 컴포넌트로 페이지를 만들지만 많은 문서와 라이브러리가 클래스형 컴포넌트를 지원한다. 따라서 이 둘을 모두 알아야할 필요가 있다.기본적으로 두 차이를 이해하려면 적어도 전통적인 함수와 클래스의 차이점을 알아야할 것이다. 우선 리액트에서 페이지를 렌더링하는 방법은 클래스의 경우 render 메소드를 사용한다. 반면에 함수형 컴포넌트는 함수 자체가 render를 담당한다고 보면 된다.둘 다 리턴 값으로 페이지의 모습을 표현하게 된다.함수형 컴포넌트function FuncComp() { return ( Hel..

반응형