[reactJS] state

잘 설명된 props, state 블로그

trustyoo86.github.io/react/2017/11/18/props-state-react.html

kern의 FE-Note

 

props, state의 차이점을 통해 state를 알아보자.

 

props : 사용자가 컴포넌트를 사용하는 입장에서 중요 -> 사용자가 컴포넌트를 조작할 수 있게 한다. (외부) 

state : props의 값에 따라 내부 구현에 필요한 데이터. -> 사용자가 알 필요 없는 부분. (내부)

 

두 부분 외부, 내부를 철저하게 분리하는 것이 중요하다.

 

생활코딩 state 출처

state는 컴포넌트가 다양한 일들을 할 수 있게 만든다.

props에 하드코딩 된 값을 state로 만들고 그 state의 값을 컴포넌트의 props로 전달.

 

 

constructor는 render보다 먼저 실행되는 함수로 클래스에 생성자랑 비슷한듯 -> 초기화를 담당한다.

이후 state를 초기화해준다. this.state = { ~~~~ } 

 

여기서 보면 app.js는 index.js에서 호출해서 사용하는데, 

index.js 에서 보면 index.js는 <App />만 바라보고 있기 때문에 그 내부에 state값에 subject가 있는지 없는지 알 수 없다.즉 외부에서 알 필요가 없는 정보를 은닉하는 것 -> 좋은 사용성을 만드는 핵심!

 

App은 내부적인 데이터는 state를 통해 사용한다.

그렇게 만들어진 state값은 컴포넌트의 props의 값으로 줬다.

상위 컴포넌트 App의 상태를 하위 컴포넌트인 Subject로 줄때 상위 컴포넌트의 state 값을 하위 컴포넌트의 props 값으로 전달하는 것이 가능하다는 것을 뜻한다.

즉, 앱의 입장에서 constructor에 state를 만들었고,  사용자에게 props로 전달하는 것을 알 수 있다?

 

 

이제 만약 같은 컴포넌트에 여러 state 값을 사용한다면??

 

 

InnerSub 데이터 변경

- App 내부의 state를 InnerSub에 주입해서 데이터를 변경해보자.

- content라는  state배열을 만들고 InnerSub에 주입.

- 여러개의 목록을 자동으로 생성할때는 key를 사용 : key={data[i].id}

    - 우리가 필요하다기보다는 리액트에서 key를 필요로 하기 떄문에 넣어주는게 좋다?