1. State

• 변경 가능한 값
• 우리가 아는 데이터에 해당.
• 데이터 변경 시 화면이 새로고침 됨

state는 우리가 일반적으로 알고있는 변수와 비슷하다. 다음 예제에서는 카드색상을 원하는색으로 바꾸는 실습을 진행하겠다.
아래와 같이 파일을 생성한다.

Label.js

 import React, {Fragment} from "react";

 const Label = (props) => {
     const labelStyle = {
         fontFamily: "sans-serif",
         fontWeight: "bold",
         padding: 13,
         margin: 0
     };

     return (
         <Fragment>
             <p style={labelStyle}>{props.color}</p>
         </Fragment>
     );
 }

 export default Label;

Squere.js

 import React, {Fragment} from "react";

 const Squere = (props) => {
     const squereStyle = {
         height: 150,
         backgroundColor: props.color
     };

     return (
         <Fragment>
             <div style={squereStyle}/>
         </Fragment>
     )
 }

 export default Squere;

Card.css

 div.card {
     height: 200px; width: 150px;
     padding: 0;
     background-color: #ffffff; -webkit-filter: drop-shadow(0px 0px 5px #666);
     filter: drop-shadow(0px 0px 5px #666);
 }

Card.js

 import React from "react";
 import Label from "./Label";
 import Squere from "./Squere";
 import "./Card.css"


 const Card = (props) => {
     return (
         <div class="card">
             <Squere color={props.color}/>
             <Label color={props.color}/>
         </div>
     );
 }

 export default Card;

App.js

 import React, {Fragment} from "react";
 import Card from "./component/card/Card";

 function App() {
     return (
             <section className="download bg-primary text-center" id="download">
                 <div className="container">
                     <div className="row">
                         <div className="col-md-8 mx-auto">
                             <div className="badges">
                                 <Card color="yellow"/>
                             </div>
                         </div>
                     </div>
                 </div>
             </section>
     );
};

Label, Squere컴포넌트를 사용하는 Card 컴포넌트를 만들고. 해당 컴포넌트의 div에 쓰일 Crad.css를 만든다.

그리고 만들어진 Card 컴포넌트를 App.js에서 사용을 하면 아래와 같은 결과를 얻을 수 있다.

기본 구조를 가지고 버튼을 통해 state값을 컨트롤해 색상을 동적으로 보여주는 예제를 만들어보자.

이전에 state는 function에서 가질 수 없었다고 했지만, 이후 hook의 useState를 통해 함수형 컴포넌트에서도 state를 가질 수 있어 해당 방법으로 진행을 해보겠다.

 import React, {Fragment, useState} from "react";
 import Card from "./component/card/Card";

 function App() {
     const [color, setColor] = useState("yellow");
     
     return (
             <section className="download bg-primary text-center" id="download">
                 <div className="container">
                     <div className="row">
                         <div className="col-md-8 mx-auto">
                             <div className="badges">
                                 <Card color={color}/>
                             </div>
                         </div>
                     </div>
                 </div>
             </section>
     );
};

color는 state값을 의미하고, setColor는 해당 state를 변경하기 위한 함수 명 이다. usestate()괄호 안에 값은 초기화 값이다.

 import React, {Fragment, useState} from "react";
 import Card from "./component/card/Card";

 function App() {
     const [color, setColor] = useState("yellow");
     
     return (
             <section className="download bg-primary text-center" id="download">
                 <div className="container">
                     <div className="row">
                         <div className="col-md-8 mx-auto">
                             <div className="badges">
                                 <Card color={color}/>
                             </div>
                         </div>
                         <div className="col-md-8 mx-auto">
                             <button onClick={()=>setColor("yellow")}> 노란색 </button>
                             <button onClick={()=>setColor("blue")}> 파란색 </button>
                         </div>
                     </div>
                 </div>
             </section>
     );
};

카드 아래에 버튼 두개를 생성한다. 온클릭 함수 안의 값은 아까 만든 color값을 바꾸는 함수인 setColor 함수를 사용한다.

버튼들을 클릭하면 다음과 같이 색상이 변하게 된다.