Keyword : State, Props, 리렌더링 발생 조건
1. State
State란 UI로의 반영을 위해서 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.
리액트에만 존재하는 개념이자 Hook이다.
- state를 변경할때는 setValue를 이용해서 값을 바꾼다.
const [ value, setValue ] = useState( 초기값 )2. props
컴포넌트 간의 데이터 교류 방법
- props는 반드시 위에서 아래 방향으로 흐른다. 부모 → 자식방향으로만 흐른다(단방향).
- props는 무조건 읽기 전용으로 취급하며, 변경하지 않는다.
props drilling -> 부모-자식간의 단계가 많아지면서 유지보수 측면에서 매우매우 비효율적인 상태가 나타난다.
props-children 방식
자식 컴포넌트로 정보를 전달하는 또 다른 방법이다.
<layout> 같은 요소들을 가져와 똑같은 형태의 style 이나, header를 구성해낼 수 있다.
- props의 구조분해
function Todo({ title, body, isDone, id }){
return <div>{title}</div>
}3. 리렌더링의 발생조건
데이터의 불변성을 지켜야 하는 이유에 대해 먼저 짚어보자
애초에 컴포넌트들이 rerendering되는 조건들이 있는데,
-> state가 변경되었을 때가 그 조건이 된다.
-> 이 말은 즉, memory 주소가 바뀌어야만 한다는 뜻이다.
- 원시데이터가 아닌 객체나, 배열을 수정할 때에 불변성을 지켜주지 않고, 직접 수정을 하게 되면 주소값은 수정되지 않았기 때문에, 리렌더링이 일어나지 않는 것이다.
해당 값을 console log 찍으면 값 자체는 바뀌어있는 것을 볼 수 있다.- 단순 변수는 리렌더링시에는 무시한다!
map, filter, [...syntax] 등의 문법들로 새로운 객체나 배열로 반환하는 것들을 이용해야만 한다.
리렌더링의 발생조건에는
1. 컴포넌트에서 state가 바뀌었을 때
2. 컴포넌트가 내려받은 props가 변경되었을 때
그렇기 때문에 불필요한 렌더링이 발생할 수 있고, 최적화(optimization)를 이용해 불필요한 렌더링이 발생하지 않도록 한다.
Disciplined, Be systemic