나의 첫 TIL이다.
오늘부터 꾸준히 해볼생각이다.
오늘의 TIL은 react의 state와 props 비교이다.
React는 javascript의 함수와 클래스를 하나의 모듈화하여 이를 조합하는 방식으로 프로그래밍을 한다. 이것을 컴포넌트라 한다.
React는 이 컴포넌트를 조합하여 복잡한 애플리케이션을 만든다
마치 oop에서 객체간의 관계를 설정하고 이를 조합하여 프로그래밍하는것과 유사하다.
하지만 React 컴포넌트는 oop와 다르게 상속이 아닌 합성 (Composition)으로 한다는 차이가 있다.
컴포넌트는 기본적으로 외부 javascript 객체를 인자로 받아와 엘리먼트를 반환하는데 이 외부 인자(매개변수)를 props라 한다.
외부(상위 컴포넌트)에서 넘겨받은 인자임으로 컴포넌트에서는 제어가 불가능하다.
또한 컴포넌트는 내부에서 제어가능한 private한 데이터가 있는데 이것을 state라 한다.
React는 props와 state 두가지 형태의 데이터가 있고 이것이 변경될때마다
렌더링이 이루어진다.
props vs state
출처:https://github.com/uberVU/react-guide/blob/master/props-vs-state.md#changing-props-and-state
둘다 상위 컴포넌트로부터 초기값을 가져온다
props는 상위 컴포넌트에서 제어가 가능하다
둘다 내부 기본값을 정의할 수 있다
state는 컴포넌트 내부에서 제어되고 props는 내부에서 제어가 불가하다.
둘다 자식 컴포넌트에서 초기값을 설정할수 있다.
props만 자식 컴포넌트에서 제어가 가능하다.
쉽게 말해 props는 부모자식 컴포넌트간의 메시지 교환을 위해 공유되고
state는 컴포넌트 내부의 상태를 관리하기 위해 사용된다
React는 두가지 요소를 통해 컴포넌트의 변화를 감지하고 변경시 ui를 다시 렌더링한다.
추가 :함수 컴포넌트는 기본적으로 state를 제공하지 않았다.
그러나 reack hook을 지원함으로 useState를 통해 함수 컴포넌트에서 state를 설정할수 있게 되었다.
