[React] State와 Props

리액트의 state와 props에 대해서 가볍게 정리해보려 한다..!

현재 내용은 추후 덧붙여지거나 수정될 수 있다. 😇 

((잘못된 부분에 대한 첨언은 언제나 환영입니다..))

 

 

 

State

컴포넌트 내부에서 바뀔 수 있는 값.

useState 훅을 통해 리액트에 state의 변화를 알려서 컴포넌트가 재평가될 수 있도록 한다.

이후 JSX가 다시 평가되며 변화된 부분을 화면에 렌더링한다.

 

const [state, setState] = useState('');

 

state에 바로 변경하면 안 될까? useState가 const로 작성된 이유는?? 🤔

우선 state는 setState 함수를 통해서만 변경이 가능하다.

state를 바로 쓰면 안 되나? 싶을 수 있는데, 이렇게 state가 직접 수정될 위험을 방지하고 setState 함수를 쓰도록 하기 위해 useState는 const로 선언이 되어 있다.

 

아래 블로그에서 좀 더 심도 깊은 고민을 볼 수 있다.

https://dudghsx.tistory.com/18

hooks에서 useState가 const로 선언되는 이유

 

 

Props

• 부모 컴포넌트로부터 받아온 데이터! (데이터의 묶음)
• 컴포넌트 간 정보를 교류할 때 Props를 이용한다.
• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주었을 때, Props로 정보를 전달했다라고 표현한다.

그러면 Props로 넘긴 값은 언제 바뀌지?? 🤔

부모 컴포넌트의 상태가 변경되었을 때 변경된다!

 

 

 

컴포넌트의 재평가

컴포넌트는 state나 props, 또는 context가 변경될 때마다 재평가된다.

이렇게 재평가될 때 리액트는 해당 컴포넌트 함수 전체를 다시 실행한다. (함수형 컴포넌트일 경우를 전제)

 

컴포넌트 함수가 재실행된다면 그럼 DOM도 리렌더링 되는 건가? 🤔

컴포넌트 함수가 재실행될 때마다 실제 DOM이 다시 렌더링 되진 않는다.

메모리 안의 가상 DOM을 통해서 이전과 가상 DOM으로 생성한 현재 상태에 차이점이 있을 때만 업데이트된다!

 

 

 

참고

• Udemy React 완벽 가이드 with Redux, Next.js, TypeScript 강의 일부 참고