[React] - state와 props

Jeonghwan Kim·2022년 12월 17일

Props React State

React

목록 보기

3/6

부스트코스 강의 웹 프론트엔드 시작하기 (리액트&리덕스)
중 'Ch3 state와 props'을 정리한 내용이다.

props

태그에 속성을 사용할 수 있도록 해준다. HTML에서의 속성은 React에서 "props"라고 한다.
위와 같이 코드 내에 {this.props.title}을 사용해 title="WEB"이라는 속성을 사용할 수 있도록 해준다. 실행 결과는 똑같지만 내부가 더 효율적이게 되었다. 기존 방식은 < Subject>가 매번 똑같은 결과를 나타냈겠지만, 이제 입력값에 따라 다르게 출력을 내보낼 수 있다.
웹 브라우저 상에선 똑같이 동작하지만 전달받은 props에 따라 서로 다른 결과를 만드는 컴포넌트를 만들 수 있게 된 것이다.

React Developer Tools

React 공식 홈페이지 - Community - Tools - debugging에 현재 react로 만들어진 react 앱의 상태를 확인할 수 있는 도구가 있다. React Developr Tools를 설치하면 웹 브라우저의 개발자 도구에서 앱의 컴포넌트를 볼 수 있다. 실제 태그를 보고싶을 때는 Elements 탭을 사용하고, React를 보고싶으면 react탭을 사용한다. props의 내용도 실시간으로 바꿀 수 있다.

Component 파일로 분리하기

하나의 파일에 여러 컴퍼넌트가 있으면 복잡하고 다른 파일에서 갖다쓰기 어려우므로 각각의 컴퍼넌트 별로 별도의 파일로 쪼개준다.
먼저 src안에 components라는 디렉터리를 만들어준다.
디렉터리 내에 파일을 만들어주고 아래 코드와 컴포넌트를 추가해준다.
- react라고 하는 라이브러리에서 component라고 하는 클래스를 로딩하는 코드
```
import React, { Component } from 'react';
```
- 외부에서 사용할수 있도록 해주는 코드
```
export default TOC;
```
이제 TOC를 다른 파일에서 가져다 쓸 수 있다. 아래 코드를 통해 App.js에 정의한 TOC 대신 "TOC.js"에 있는 코드를 사용하도록 한다.
```
import TOC from "./components/TOC"
```
다른 컴퍼넌트들도 마찬가지로 다 따로 빼주면, 코드가 훨씬 간결해지고 필요한 컴퍼넌트를 빨리 찾을 수 있게 된다. 또한 다른 파일에서 이 컴퍼넌트를 이용할 수 있게 되었다.

state

props는 사용자가 컴퍼넌트를 사용하는 입장에서 중요한 것이고, 이를 통해 컴퍼넌트를 조작할 수 있게 된다.
state는 props의 값에 따라 내부의 구현에 필요한 데이터들이다.
component를 만들고 props를 통해 사용자가 조작할 수 있게 해준다.
component 내부적으로 사용되는 것들이 state이다.
props와 state를 철저하게 분리하는 것이 좋은 컴퍼넌트를 만들기 위해 중요하다.
App.js 컴퍼넌트에 < Subject>에는 props 값들이 다음과 같이 하드코딩되어있다.
- 이 props 값을 state로 만들고 state의 값을 < Subject>의 props로 전달하도록 한다.
- 먼저 state의 값을 초기화시키고 그 값을 < Subject>의 title, sub에 들어가는 값으로 세팅한다.
state값을 초기화하기 위해 constructor라는 함수를 render()함수 앞에 넣어준다.
- this.state={} 코드를 통해 state 값을 초기화 해준다.
- Subject의 값을 state화 시키기 위해 this.state에 Subject props의 값으로 객체를 부여한다.
  이후 이렇게 만든 state를 기존 subject자리에 다음과 같이 넣어준다.
index.js에는 App 컴퍼넌트를 실행하는 코드가 있지만, 코드만 보고 내부적으로 state값이 subject가 있는지 알 수 없다. 외부에서 알 필요 없는 정보를 철저하게 은닉하면 사용성이 좋아진다.
App 컴퍼넌트를 내부적으로 사용할 상태는 이렇게 'state'라는 형태를 사용하고, state값을 < Subject>컴퍼넌트의 props 값으로 부여해준다.
상위 컴퍼넌트의 state값을 하위 컴퍼넌트의 props값으로 전달하는 것이다.

key

state에서 여러 값을 다룰 때는 사용법이 조금 달라진다.
매번 < TOC>의 글목록이 추가될 때마다 수정하긴 힘드므로 컴퍼넌트 < APP>의 내부 state를 < TOC>에 주입해 < TOC> 내부 데이터가 자동으로 바뀌도록 수정한다.
contetns라고 하는 property를 state에 추가하고 데이터 객체가 여러 개이기에 대괄호를 열어 배열로 만들어준다.

contetns에 담겨있는 이 배열 정보는 < TOC>에 'data'라고 하는 props로 {this.state.contents}를 주입해준다.
< TOC> 컴퍼넌트는 이제 내부적으로 this.props.data 값을 갖게 되는데, 아래 코드를 이용해 글 목록을 자동으로 생성해주도록 한다.
- 이 때 element 여러개를 자동으로 생성하는 경우 웹의 콘솔창에 에러가 발생하게 되는데, 각 리스트 항목에 key라고 하는 props를 지정해주어야 한다. 다음 코드를 통해 여러 개의 목록을 자동으로 생성할 때는 각각의 목록을 다른것들과 구분할 수 있는 식별자를 key를 통해 적어준다. key는 앱에서 사용하기보다는 리액트가 내부적으로 필요해 요청하는 것이다.
```
lists.push( <li key={data[i].id}><a href={"/content"+data[i].id}>{data[i].title}</a></li>);
```
이렇게 부모인 App의 입장에서는 state라고 하는 내부정보를 사용하고 그것을 자식에게 전달할 때는 props를 통해 전달한다. App에서는 토픽이 내부적으로 어떻게 돌아가는지 알 필요가 없어진다.