react props, state

2021.07.30

계속해서 생활코딩 강의를 들으며 REACT와 친해지는 중입니다.

( 오늘 내용은 아직 불안한 개념이기에 이해한대로 끄적인 수준입니다.

 추후에 공부를 더한 뒤 수정하겠습니다. )

 

1. State

 

state와 props는 두가지 모두 데이터를 다룰 때 사용하는 개념입니다. 

먼저 state는  "하나의 컴포넌트가 가질 수 있는 변경 가능한 데이터"  입니다.

render() 가 일어나기 전에 state = { mode : "unknown" } 처럼 처음에 값을 넣어 선언합니다.

render() 안에서 state 변수를 사용하기 위해선 {this.state.mode} 형식으로 넣어줍니다. 

 

함수를 사용해 state 변수를 변경해보겠습니다.

함수 역시 render() 전에 선언해줍니다.

stateChange = () => { this.setState( {

    mode : "known"

} ); };

stateChange라는 함수를 선언했습니다.

원래 함수 안에서 this는 컴포넌트 자체를 가르키기 때문에 .bind(this) 를 붙여줘야합니다. 하지만

화살표 함수를 사용했기 때문에 bind를 하지 않아도 함수를 사용할 수 있습니다.

(화살표함수에서 this는 상위태그를 가르키기 때문입니다.)

state값을 변경하려면 setState를 사용해서 바꿔주어야 합니다.

state값이 생성된 후 바꾸려면 꼭 setState를 사용해야합니다.

setState를 하면 render가 호출되어 화면을 다시 그립니다.

(this.state.mode = 'known' 이런 식으로 바꾸면 react 몰래 값을 바꾸는 격이 됩니다.)

 

결론은 state는 현재 컴포넌트 안에서 새로운 데이터를 만들어 낼 때 사용합니다.

 

 

2. Props

 

props도 역시 데이터를 다룰때 사용하는 개념입니다.

상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줄 때 사용합니다.

{this.props.??} 같은 형식으로 사용합니다. 보통 컴포넌트(<>태그, attribute를 정의하듯이) 안에서 선언합니다.

단순히 말해 props는 컴포넌트 끼리 값을 전달하는 수단입니다.

ex) <App mode = "welcome" />   ->   < app이라는 컴포넌트의 mode라는 props의 값은 "welcome"임 >  

(하위 컴포넌트에서 {this.props.mode} = "welcome")

 

props와 state를 적절히 섞어 사용하면 상위 하위 컴포넌트끼리 유기적으로 연결되며 훌륭한 웹 페이지

뷰단을 완성시킬수 있습니다. 

 

3. 최종 정리를 하자면

 

props는 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터입니다. 자식 입장에서 Read only입니다.

state는 컴포넌트 본인이 들고 있는 값을 말합니다. 비교적 쓰기 전용입니다.

 

 

 

 

다음 시간엔 setState 함수와 bind 함수에 대해 정리해보겠습니다.