React - Component의 State

 

state

state란 말 그대로 컴포넌트의 상태 값을 의미한다.

state와 props는 둘 다 Object이고, 화면에 보여줄 정보(상태)를 가지고 있다.

그런 점에서 서로 비슷한 역할을 한다.

props는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있다.

마치 parameter(값)을 보내는 것과 같다.

반면, state는 컴포넌트 내에서 정의하고 사용한다.

 

특징

- state정의 할때, 반드시 constructor()함수를 호출하고 super()를 해줘야 사용 해야한다.

- state 타입은 Object이고, 키와 값으로 이루어진 그 안에 배열, 객체와 같은 타입들을 다 담을 수 있다. ex) 이미지 리스트(배열)

- 이벤트 발생 요소와 반영 되는 요소는 엄연히 다르다.

 

공부 할 예제를 보며 차근차근 분석해보자.

 

1. class Button extends React.Component

: React의 Component를 확장해서 그 기능들을  class를 이용해서 Button이라는 컴포넌트를 생성했다.

 

2. constructor(){ super(); }

: 컴포넌트 안에서 state를 사용할려면 반드시 사용 해야하는 구문을 의미한다.

- constructor() : class의 instance가 생성될 때 항상 호출되는 함수(생성자)이다.

- super() : React.Component class에 있는 메서드들(ex rneder)을 사용할 수 있다.

 

3. this.state = { clicked: false }

: state를 사용하는 구문이며, 여기서 this는 Component를 의미한다.

 

4. render() { return( ); }

: 클래스 컴포넌트 안에는 render()라는 요소를 그리는 메서드가 존재한다. 메서드 안에 return이 요소를 반환한다.

 

5. onClick={()=>{this.setState({ clicked: !this.state.clicked })}}

: onClick은 React에서 클릭 이벤트 헨들러이고, this.setState()는 state의 상태를 변경 시켜주는 메서드이다. 버튼을 클릭을 했을 때, clicked: false로 이루어진 값이 clicked: !this.state.clicked로 업데이트 된다는 의미이다.

 

6. {this.state.clicked ? ‘좋아요’ : ‘싫어요’} 

: (조건식) ? '참' : '거짓' 의 형태를 가진 것을 삼항연산자라 하며, 조건식이 true이면 '좋아요'를 보여주고, false이면 '싫어요'가 화면에 보여진다. 

 

5. ReactDOM.render( <Button />, document.getElementById('root') ); 

: ReactDOM.render() 첫번째 인자에는 컴포넌트, 두번째 인자에는 컴포넌트를 보여줄 요소를 의미한다. 즉, "Button이라는 컴포넌트를 id의 이름이 root라는 곳에 랜더링시키겠다 혹은 화면에 그려주겠다." 라는 의미라고 보면 된다.

 

실행 화면

버튼을 누르면,

결과