Props
React에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미한다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하여 자식 컴포넌트에서 해당 데이터를 사용할 수 있습니다. props는 읽기 전용이어서 자식 컴포넌트에서 직접 변경할 수 없습니다.
예시)
함수형 컴포넌트에서 Props를 전달하는 예시를 살펴보자.
MyComponent 정의
My Component를 정의해주었다. 이 컴포넌트는 props로 name속성이 들어있는 객체를 전달받는다.
ParentComponent 정의
부모컴포넌트에서 MyComponent를 사용할 때 다음과 같이 props에 값을 넘겨줄 수 있다.
Props의 특징
💫 위 예시와 같이 props는 단방향(부모에서 자식)으로 전달된다.
💫 props는 읽기 전용이기 때문에 자식컴포넌트에서 그 값을 수정할 수 없다!
💫 부모에서 자식 컴포넌트로 상태(state) 값을 전달할 수 있다. 이 값은 렌더링 될 때마다 변경될 수 있다.
state
React에서 state는 컴포넌트 내부에서 관리되는 데이터이다. props와는 달리, state는 컴포넌트 내부에서 변경 가능하다.
함수형 컴포넌트에서는 useState 훅을 사용해서 state를 관리한다.
예시)
함수형 컴포넌트에서 useState 훅을 사용해서 state를 조작하는 예시를 살펴보자.
간단한 MP3Player 컴포넌트를 만들어주었다. MP3에는 뉴진스의 Ditto가 나오고 있다 💓
MP3에는 볼륨을 조절하는 기능이 있고, 볼륨 상태는 useState를 사용해서 관리되고 있다.
여기서 잠깐!! 👉 useState 사용법
const [상태, 상태 변경함수] = useState();useState 훅은 반드시 위 형태로 사용해야한다.
이 문법을 javascript의 디스트럭처링(Destructuring)이라고 한다. 배열의 값을 추출해서 변수에 할당하는 방식이다.
useState() 함수는 첫번째 인자로 상태값을, 두번째 값으로는 상태 변경 함수를 담은 배열을 return 하고 있다. 이 값을 우리는 변수 배열에 담아서 사용하는 것이다. 그렇기 때문에 변수 이름은 원하는 대로 변경해서 사용할 수 있다. 보편적으로 [state, setState] 와 같이 상태 변경함수의 이름에는 set 키워드를 붙여서 사용하고 있다.
그래서 왜 useState를 사용해서 상태를 변경시키는건데? 🤷♀️
useState는 리액트의 훅이다. 즉, 리액트의 상태 관리에 최적화된 훅이라는 것이다. useState를 사용해서 상태를 관리하면 React가 상태 변경을 감지해서 변경된 값을 즉각 반영(렌더링) 한다.
만약 useState를 사용하지 않고, 그냥 변수에 담아서 상태를 관리한다면 값이 변경되어도 렌더링되지 않아서 값이 실시간으로 반영되지 않는다.
따라서 state를 직접 수정하지 않고 useState Hook을 사용하는 것이 React 앱을 더욱 예측 가능하고 안정적으로 만드는 길이다.!!
다시 예제로 돌아가서 살펴보면, controlVolume 함수에서 setVolume 함수를 사용해서 volume 상태 값을 변경해주고 있다.
함수가 실행될 때마다 volume 값이 변경되면 MP3Player 컴포넌트는 다시 렌더링되어 변경된 값이 실시간으로 화면에 보여진다.
이처럼 state는 동적으로 변경되는 데이터를 다루기 위해 사용된다.
