[React] state란? (props와 비교)

props는 사용자가 컴포넌트를 사용하는 입장에서 중요하고

state는 props의 값에 따라서 내부에 구현에 필요한 데이터들이다.

 

components의 기본적인 동작을 바꾸고 싶을 때 사용자에게 제공하는 것이

태그에서는 속성에 해당하는 props였다. 사용자에게 중요!

사용자에게는 알 필요도, 알아서는 안되는 컴포넌트에서 내부적으로 사용되는 것들을 state라고 한다. 

그래서 리액트와 같은 시스템이 component를 만들고 component가 좋은 부품이 되기 위해서는

component를 사용하는 외부의 props와 props에 따라서 component를 구현하는 내부의 state라는 정보가 철저하게 분리되어있어야 한다.

 

컴포넌트를 구현할 때 좀 더 복합적으로, 다양한 일들을 하는 컴포넌트들을 만들 때 필수적인 요소인 state에 대해서 알아본다.

 

 

 

App컴포넌트 안에 Subject라는 하위 컴포넌트가 있따.

이 Subject의 props 값들이 하드코딩 되어있다 .

이 값을 state로 만들고 state 값을 subject의 props로 전달하는 것으로 코드를 개선해볼 것이다.

 

 

어떠한 컴포넌트가 실행될 때, render라는 함수보다 먼저 실행되면서 컴포넌트를 초기화시켜주고 싶은 코드는 constructor 함수 안에 작성해주면 된다.

초기화가 끝나면 this.state={} 로 state값을 초기화시켜준다.

지금 우리는 subject의 값을 state화 시킬 것이기 때문에

subject props 값으로 다시 객체를 주는데 그 객체의 title을 WEB sub를 World Wide Web이라고 값을 준 state 를 만든 것이다.

 

이렇게 만든 state를 어떻게 사용하느냐?

 

ex) 이 state값을 title의 값으로 주고싶다!

이렇게 작성하면 리액트에서는 props 값을 따옴표로 묶어주면 문자로 인식하기 때문이다.

문자가 아니라 자바스크립트의 코드로써 실행하고 싶다면 중괄호를 써주면 된다.

 

이렇게 해주면 웹 브라우저에서 보이는 WEB이라는 글자는 위에 consturctor 함수의 state에서 가져온 값이다.

 

 

 

정리)

App.js를 사용하고 있는 파일은 index.js이다.

index.js를 보면 App을 실행하는 코드는 이 부분이다.

이 코드를 보는 우리 입장에서는 내부적으로 state가 subject를 가지고 있는지 알 수 없다.

여기서 중요한 부분이 "알 수 없다, 모른다" 라는 부분이고

외부에서 알 필요가 없는 정보를 철저하게 숨기는게, 은닉하는게 좋은 사용성을 만드는 것의 핵심이다.

 

 App이 내부적으로 사용할 상태는 state라는 형태를 통해서 사용한다.

그리고 그렇게 만들어진 state값을 Subject라고 하는 컴포넌트에 props값으로 줬다.

 

무슨 뜻이냐?

상위 컴포넌트인 App의 상태를 하위 컴포넌트로 전달하고 싶을 때는

이렇게 상위 컴포넌트의 state값을 하위 컴포넌트의 props값으로  전달하는 것은 얼마든지 가능하다.

 

 

여기까지 봤던 state는 subject라고하는 property에 값 하나였는데

여러 개의 값을 다룰 때는 방법이 조금 달라진다.

 

 

이번에는 TOC 안에 있는 데이터를 App의 내부 state를 TOC에 주입해주는 것을 통해서 자동으로 데이터가 바뀌게 해볼 것이다. 목록이 추가될 때마다 TOC에 자동으로 추가되도록!

TOC의 부모가 가지고 있는 state를 이용해서 TOC의 내부 데이터를 바꾸도록 해볼 것이다.

 

 

 

1) contents라고하는 property를 state에 추가했다.

2) 데이터가 여러 개이기 때문에 대괄호로 배열을 만들었다.

3) 그 배열의 첫번째 값은 객체인데 그 객체는 id, title, desc 값들이 있다.

4) 이 배열을 TOC에 주입하고 싶다면 data라는 props로 this.state.contents를 넣어줬다.

5) TOC.js에서는 데이터를 하나씩 뽑아서 <li>태그를 하나씩 만들고 리스트에 담아주었다.

6) 만든 리스트를 <ul>에 그대로 넣어준다.

 

 

 

한 가지 주의할 점은 lists.push에서 elements 여러 개를 자동으로 생성하고 있는데

이 경우 콘솔에서는 에러가 발생한다.

- 각각의 리스트 항목들을 key라고 하는 props를 가지고 있어야한다.

 

 

그래서, 여러 개의 목록을 자동으로 생성할 떄에는 key값을 만들어주어야한다.

이 값은 애플리케이션에서 사용한다기보다, 리액트가 내부적으로 필요해서 요청하는 것이기 떄문에 그냥 넣어준다!

 

 

 

 

한줄요약.

부모는 App의 입장에서는 state라는 내부정보를,

자식에게 전달할 때는 props를 통해서 전달하고 있다.

 

 

앱의 입장에서는 topic이 내부적으로 어떻게 돌아가는지 알 필요가 없다.

data라고 하는 props로는 어떤 형태의 정보를 전달하면 되는가라고 하는 사용자 입장에서 알 것만 알 면 된다.