13. React state, props

State, Props

state와 props는 React에서 데이터를 다룰 때 사용하는 것들로 props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달하는데 사용하고 state는 컴포넌트가 스스로 사용한다. 

 

State

state는 컴포넌트 내에서 데이터를 관리하기 위해서 사용하는 객체입니다. 또한 state의 가장 큰 특징 중 하나는 바로 State의 값이 변경되면 그 값에 맞춰서 화면을 즉 HTML과 CSS가 다시 출력하게 됩니다. 이 과정을 리렌더링이라고 부릅니다. 이 특징으로 인해서 state가 한 함수 내에서 여러번  변경되게 되면 화면을 계속 재출력하여 낭비가 일어날 수 있기 때문에 함수가 끝나기 전에 변하는 state값을 다른 곳에 저장해 두었다가  함수가 끝날 때 저장해둔 state 값을 불러와 리렌더링을 실시합니다.

 

 state를 사용하기 위해서는 반드시 setState를 사용해서 state 안의 값이 변경되어야 합니다. 만약 직접 값을 변경하게 되면 리액트가 컴포넌트를 리렌더링하는 타이밍을 모를 수 있기 때문이다. 왜냐하면 setState를 통해서 리액트에 리렌더링을 요청하기 때문입니다.

 

 state의 이런 특징을 잘 나타내는 코드 이미지

 

예시 코드

위 코드를 해석해 보자면 user라는 이름으로 state에 만들겠다는 것이고 그 초기값은 "me"이고 이 state 값은 setUser라는 메서드로 변경할 수 있다는 것을 나타내는 코드입니다.

 

리렌더가 되는 상황

1. 새로운 props가 들어올때

2. 부모 컴포넌트가 렌더링 될때

3. 강제 업데이트가 실행될 때

4. state가 변경될 때

 

Props

props는 리액트가 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송해주기 위해서 사용하는 객체이다. 오직 부모에서 자식으로만 데이터가 전달되기 때문에 리액트는 단방향 데이터 플로우라는 특징을 가지고 있다. 또한 위에도 설명했듯이 새로운 props가 들어왔을 때 리렌더링이 된다는 특징을 가지고 있다.

 

Props drilling

props drilling은 props를 하위 컴포넌트의 하위 컴포넌트로 데이터를 보내는 용도로만 전달하는 것을 말한다. 즉 조부모 컨포넌트가 손자 컴포넌트에 데이터를 전달하기 위해 부모 컴포넌트에게 보내는 것을 말한다. 이런 것에 코딩적인 문제는 없지만 props drilling이 더 긴 범위로 일어나게 되면 하나의 props 데이터를 수정하기 위해서 데이터를 전달하기 위해서 통과한 모든 컴포넌트의 props를 수정해줘야하는 문제가 생겨 유지 보수에 차질이 생길 수 있다.

이를 해결하기 위해서 전역 상태관리 라이브러리를 사용하거나 children을 사용하는 것이 있습니다.

 

 

예시 코드

예시 코드를 보면 가장 위의 코드에서 처럼 jsx의 태그 안에 isEdit라는 값을 props 객체에 저장해 전달한다. 그 후 props를 인자로 받은 것이 바로 2번째 코드이다. 그리고 이렇게 받은 props를 사용한 것이 마지막 코드의 props.isEdit를 이용해서 사용하고 있다.