Props
- Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말한다. 부모 컴포넌트로부터 받은 데이터이므로 자식 컴포넌트에서 데이터를 변경할 수 없다.
- 단방향 데이터 흐름의 리액트에서 상위에서 하위로의 데이터 전달을 위해 사용된다.
- props는 함수 매개변수처럼 컴포넌트에 전달된다
State
- State는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 컴포넌트 안에서 데이터를 변경할 수 있다. 즉, State는 한 컴포넌트의 상태를 나타낸다.
- 일반 변수와 다르게 State는 값이 변하면 렌더링이 일어난다.
- React의 함수 컴포넌트에서는 State를 사용하기 위해 useState라는 훅(Hook)을 사용해야한다. useState는 State 변수의 초기값을 매개변수로 전달하여 호출하며, 결과값으로는 배열을 반환한다. 반환된 배열에서는 useState 함수를 호출할 때 설정한 초기값이 할당된 변수와 해당 변수를 수정하기 위한 Setter 함수가 포함되어 있다
const [state, setState] = useState(init);
- useState를 사용하여 할당받은 변수(state)는 불변값이다. 따라서 해당 값은 직접 수정이 불가능하며 해당 값을 변경하기 위해서는 반드시 Setter 함수(setState)를 사용해야 한다.
- setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다.
- setState()를 사용하지 않고 직접 데이터를 바꾸면 리액트는 state의 변경을 감지하지 못한다.
- state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.
- 렌더링을 일으키는 변수
- 컴포넌트의 메모리(A Component’s Memory)
참고자료