최근 급하게 쌓아온 모래성같은 실력이 손 틈새로 빠져나가는 느낌을 지울 수 없다.
그런 이유로 흐릿해진 중요 개념들을 복기해야겠다는 생각이 들었다.
Props
- props는 프로퍼티(properties)의 준말이다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향 데이터 흐름)
- 수정할 수 없다는 특징이 있다. (자식 입장에서는 읽기 전용 데이터이다.)
- 문자열을 전달할 때는 ""를, 문자열 외의 값을 전달할 때는 {}를 사용한다.
State
state는 컴포넌트의 현재 상황에 대한 정보를 나타내기 위해 리액트에서 쓰는 일반 JavaScript 객체다. setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다.
state와 props의 차이점
props와 state는 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면, state는 (함수 내에 선언된 변수처럼)컴포넌트 안에서 관리된다.
그 외에도
의 차이점이 있다.
Children
공식 문서에 따르면 props.children이란
'어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 '박스' 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다.'
여기서 말하는 범용적인 '박스'역할을 하는 컴포넌트란 크게 봤을 때 Layout 역할을 하는 컴포넌트이다.
useState
useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해 준다. useState의 기본적인 형태는 아래와 같다.
const [state, setState] = useState(initialState);원래는 useState라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습이다. state를 변수로 사용하고, setState를 이용해서 state값을 수정할 수 있다. 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우 불변성을 유지해줘야 한다.
setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식이 있다. 바로 함수형 업데이트 방식이다.
// 기존에 우리가 사용하던 방식
setState(number + 1);
// 함수형 업데이트
setState(() => {});위 코드와 같이 setState의 ()안에 수정할 값이 아니라 함수를 넣을 수 있다. 그리고 그 함수의 인자 안에서는 현재의 state를 가져올 수 있고, {} 안에서는 이 값을 변경하는 코드를 작성할 수 있다.
// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다.
setState((currentNumber)=>{ return currentNumber + 1 });일반 업데이트 방식은 명령을 하나로 모아 최종적으로 한 번만 실행을 한다.
반면 함수형 업데이트 방식은 명령을 모아 순차적으로 각각 1번씩 실행을 시킨다.
공식 문서에 따르면, '리액트는 성능을 위해 setState()를 단일 업데이트(batch update)로 한꺼번에 처리할 수 있다.'
useParams
useParams를 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id값을 조회할 수 있다.
만약 우리가 works/1로 이동하면 1이라는 값을 주고, works/100으로 이동하면 100이라는 값을 사용할 수 있게 해준다.
