[WIL] ReactJS 기초

State ?

state는 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체이다.

리액트에서는 유동적인 데이터를 변수에 담아서 사용하지 않는다.함수형 컴포넌트에서는 useState() 라는 함수를 사용해서 state라는 저장공간에 담아 실행한다.state가 변경되면 자동으로 변한 부분만 재렌더링이 된다.

 

State 동작 원리

리액트의 함수형 컴포넌트는 최초에 한번 실행하면서 초기에 설정한 state값을 가진다.

// 초기값은 0이다
const [state, setState] - useState(0);

useState()는 구조분해할당을 이용해서 첫 번째에 변경될 값을, 두 번째에 변경하는 함수를 설정한다.

위 코드는 state의 초기값을 0으로 설정하고 어떠한 이벤트가 발생할 때 setState 함수를 호출하여 state값을 바꾼다.

이전에 가지고 있던 가상 돔에서 가지고 있던 state와 현재의 state를 비교하여 값이 달라졌다면 달라진 부분만 DOM에 업데이트를 한다.

 

Props ?

리액트는 사용자가 정의한 컴포넌트로 작성한 엘리먼트에서 어트리뷰트와 자식 컴포넌트에 단일 객체로 props를 전달한다.

따라서 props는 위와 같이 컴포넌트에게 값을 전달해주기 위해 사용된다고 생각하면 된다.

리액트는 수많은 컴포넌트들이 조립되어 있는 형식이고 여러 값들을 props를 이용해 단방향으로 전달한다.

단방향 전달은 상위 컴포넌트가 하위 컴포넌트에게 전달하는 방식으로 이루어진다.

 

Props 는 읽기 전용

모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야하는 중요한 규칙이 있다.

함수형 컴포넌트나 클래스형 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.

function sum(a, b) {
  return a + b;
}

위와 같은 함수들을 순수 함수라고 칭하며, 이러한 순수 함수는 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 동일한 결과를 반환한다.

 

function withdraw(account, amount) {
  account.total -= amount;
}

이 코드는 자신의 입력값을 변경하기 때문에 순수함수가 아니다.

 

리렌더링 발생 조건

렌더링은 컴포넌트의 정보를 화면에 보여주는 것을 의미한다.

이러한 정보들을 이용해 화면을 구성하는 과정인 렌더링이 많아지면 속도는 저하되고 메모리 사용량은 높아질 수 밖에 없다.

따라서 전혀 필요하지 않은 렌더링이 발생하면 효율성이 떨어지며 같은 결과를 출력해도 속도에서 큰 차이가 날 것이다.

그러므로 우리는 최소한의 렌더링으로 화면을 보여주는 방법을 생각해야 하며 이를 위해서는 리렌더링의 조건을 알아야 한다.

 

리렌더링에는 대표적으로 3가지 조건이 있다.

• props 변경
• state 변경
• 부모 컴포넌트 렌더링

먼저 props는 업데이트 되면서 리렌더링을 한다. 이는 곧 부모 컴포넌트의 state에서도 변경이 일어난다는 뜻이다.

부모 컴포넌트에서 state 변경이 발생하면 props도 업데이트되면서 모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

state 또한 업데이트가 일어나면 리렌더링을 한다. 변경된 상태를 바로바로 감지하여 화면에 보여주기 때문이다.

부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들도 모두 렌더링되므로 props와 같은 원리이다.

 

 

Reference

https://thinkforthink.tistory.com/339

https://ko.reactjs.org/docs/components-and-props.html

https://tooo1.tistory.com/580