[React] 컴포넌트에 상태값 주고 변경하기

컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 알아봤었다,

[React] 컴포넌트에 조건문 주기, if, 3항 연산

이번엔 컴포넌트에 상태를 주고 버튼을 클릭해 상태를 변경해본다.

 

상태값 주기

클래스형 컴포넌트 Booklist에 state를 통해 테마를 white로 줬다. 2개 이상의 상태를 줄 수도 있다.

클래스형은 render함수를 통해 반환을 해야한다. 

현재 컴포넌트(this)의 state의 theme값이 white일 경우 white theme를

아닐 경우엔 blue theme를 div태그에 나타낸다.

현재는 초기값으로 white가 들어가있으므로 div태그에 white theme가 나타난다.

 

상태값 변경하기

상태를 나타내는 div아래에 버튼태그 두개를 생성한다.

각 버튼에 클릭이벤트를 주고 setState를 통해 theme값을 바꿔준다.

Blue1버튼을 클릭하면 theme를 blue로 바꿔주고 그에따라 첫 div태그는 white값이 아니므로 blue theme를 나타내고

White1버튼을 클릭하면 theme를 다시 white로 바꿔준다.

Blue1버튼을 클릭하면 이벤트에 따라 setState를 실행하여 theme값을 blue로 바꿔준다.

 

onclick의 내용을 함수형태로 따로 빼서 사용해도 된다.

각 버튼을 클릭하면 그에 맞는 state값으로 변경되고 div태그에 표시된다.