[리액트(React) 학습자를 위한 기초지식] Props&State - #2 State

리액트(React) 학습에 필요한 사전지식

Props&State - #2 state

이전글인 (Props&State - #1 Props)에서 설명한 바에 따르면, Props는 데이터를 전달받는 역할을 합니다. 

예제 컴포넌트를 생성해볼게요.

LightSwitch.js

import React, { Component } from 'react';

class LightSwitch extends Component {

constructor(props) {

super(props);

this.state = {

power: false,

}

}

render() {

return (

<div>

SWITCH {this.state.power ? 'ON' : 'OFF'}

</div>

);

}

}

export default LightSwitch;

constructor(){} 생소하지 않나요? 컴포넌트도 생명주기가 있습니다. 생명주기는 하나의 컴포넌트가 생성되어 실행될 때, 컴포넌트 내부에서 작성된 코드가 어떤 식으로 실행이 되는지 실행되는 순서. 이는 나중에 다루어보도록 하겠습니다. constructor(){}는 우선적으로 실행됩니다. 이 생성자가 실행되는 시점에 false라고 boolean type으로 저장한 power 이름으로 State를 정의합니다. 이 코드에서 LightSwitch 컴포넌트는 내부적으로 power: false 라는 값, 즉 '상태'를 가지는 것이 됩니다.

생성자 함수를 실행한 후 render 함수가 실행됩니다. render 함수는 생성자 함수에서 실행된 내용을 바탕으로 JSX 형식으로 DOM을 형성합니다. DOM을 형성하는 과정에서 생성자 함수에서 설정한 State 값을 참조합니다. 정의한 State를 참조하는 기본 방법은  {this.state.power}  처럼 'this.state.'로 State를 참조한 다음 참조할 State명을 적으면 됩니다. 이런식으로 자신의 State를 참조합니다. 여기에서   {this.state.power}  는 false 값을 얻을 수 있으므로 화면에서는 'OFF' 문자열이 표시됩니다.

State를 조금 더 복잡하게 만들어볼까요?

Profile.js

import React, { Component } from 'react';

class Profile extends Component {

constructor(){

super();

this.state = {

name: 'Jake',

data: {

height: 180,

weight: 80

}

};

}

render() {

//구조분해 할당

const { name, data } = this.state;

return (

<div>

<h1>{name}</h1>

<dl>

<dt>Height</dt>

<dd>{data.height}</dd>

<dt>Weight</dt>

<dd>{data.weight}</dd>

</dl>

</div>

);

}

}

export default Profile;

이제 작성한 컴포넌트를 App.js에서 호출합니다.

App.js

import React from 'react';

import LightSwitch from './basic/LightSwitch';

import Profile from './basic/Profile';

const App = () => {

return(

<div>

<LightSwitch />

<ProfileCopy />

</div>

);

}

export default App;

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019