반응형

 

 

< 목차 >

  1. Props 와 State의 역할
  2. Props
  3. State
  4. counter 버튼 만들기

 

 

 

1. Props 와 State 의 역할 

props와 state는 React에서 데이터를 사용할 때 등장하는 개념이다. 각각의 역할에 대해 알아보기 이전에 React를 공부함에 있어서 중요하게 짚고 넘어가야 할 포인트에 대해 언급하고자 한다. 

 

" 데이터가 바뀌면 화면이 바뀐다. "

 

프론트 서버에서는 백 서버에 데이터를 요청하고 요청받은 데이터를 이용해서 화면을 그리는 작업을 진행하게 된다. 하지만 만약 데이터가 바뀌면 화면이 바뀔 수 있도록 프로그래밍 되어 있다면 보다 수월하게 UI를 제작할 수 있을 것이다. 그리고 이러한 모토를 가지고 있는 것이 바로 React이다. 

 

여기서 데이터란 props와 state를 말하고 화면은 component를 지칭한다. props 혹은 state의 값이 바뀌게 되면 component를 다시 실행하게 되고 변경된 부분만을 감지해서 변경해준다. 즉, 데이터가 바뀌면 component가 변하게 되는 것이다. 

 

Props는 부모 component가 자식 component에게 값을 전달할 때 사용되는 개념이다. 그리고 State는 component 자기 자신이 가지고 있는 값으로 데이터를 저장하는 용도로 사용된다. 

Props & State

 

 

 

2. Props 

부모 component가 자식 component에게 데이터를 전달할 수 있게 하는 것이 바로 Props이다. component를 사용할 때 임의의 속성을 만들어서 속성값을 통해 데이터를 전달하게 된다. 코드를 살펴보도록 하자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    
    <script type="text/babel">

        class Input extends React.Component {
            render() {
                return (
                    <input type="text" value={this.props.value} />
                    // JSX 문법에서 javascript 코드를 사용하고 싶을 때는 중괄호{} 사용
                    // 여기서 value는 HTML의 value
                )
            }
        }

        class App extends React.Component {
            render() {
                return (
                    <div>
                        <Input value={1} name={'bitkunst'} age={'29'} />
                        // 여기서 value는 값을 넘길 변수명
                    </div>
                )
            }
        }

        ReactDOM.render(
            <App />,
            document.querySelector('#root')
        )

    </script>
</body>
</html>

<App /> component 안에서 사용된 <Input /> component 안에 value={1}, name={'bitkunst'}, age={'29'} 속성이 들어가 있는 것을 확인할 수 있다. 여기서 value, name, age는 데이터를 보낼 속성 이름을 지칭한다. <Input /> component 안에 value, name, age라는 임의의 속성을 만들어서 자식 component에게 값을 전달한 것이다. 자식 component는 이렇게 만들어진 속성값을 props를 통해서 전달 받을 수 있다. component는 데이터를 가진 하나의 "props" 객체 인자를 받은 후 React 엘리먼트를 반환한다. props는 component에서 component로 전달하는 데이터이다. 이때 기본적으로 부모에서 자식으로 데이터를 전달하게 된다. 또한 component의 속성으로 부모 component에서만 설정 가능하다. 

 

클래스 component에서 Props를 받아서 사용할 때는 { this.props.속성명 } 형태로 사용하면 된다. 여기서 어떠한 경우에 중괄호{ }를 사용하는지 간단히 짚어보자. 우선 JSX 문법을 사용함에 있어서 일반적인 HTML을 사용하고 있는 것인지, Component를 사용하고 있는 것인지를 구별할 수 있어야 한다. 일반적으로 HTML에서 사용하는 속성값들은 기본적인 HTML을 작성할 때 쓰던 방식 그대로 작성하면 된다. 단지, 속성값으로 변수를 사용하고 싶을 때 중괄호{ }를 사용해서 아래와 같이 작성해주면 된다.

<input type="text" value={this.props.value} />

즉, JSX 문법 구문 중에서 JavaScript 변수를 사용하고 싶은 공간에는 중괄호{ }를 사용한다고 생각하자. 그리고 component 안에서 속성값을 집어넣을 때는 아래와 같이 중괄호{ }를 사용한다. ( component를 사용하면서 안에 들어가는 속성값들은 전부 props값이다. )

<Input value={1} name={'bitkunst'} age={'29'} />

 

 

 

 

3. State 

State는 "상태"를 일컫는다. State는 쉽게 말해서 "React에서 사용하는 변수"라고 얘기할 수 있다. 특정 component 안에서 사용하는 변수를 state라는 공간에 집어넣고 사용하게 된다. 즉, component 내부에서 관리되는 데이터의 상태를 의미하는 것이 바로 state이다. state는 객체 형태로 존재하기 때문에 React에서는 모든 변수를 객체 안에 담아서 관리하게 된다. 

 

주의할 점은 상태를 나타낼 때는 반드시 "state"란 변수명으로 사용해야만 한다. 그리고 클래스 component에서는 상태값을 state 변수 안에서 객체 형태로 관리한다. 

 

React는 state 객체를 참조해서 상태값의 변경 유무를 파악한다. 이 때 상태값을 바꾸기 위해서는 setState( )라는 함수를 사용해서 상태값을 변경해줘야만 한다. setState( ) 함수는 React에 내장되어 있는 함수로 바뀐 상태를 감지해서 state를 변경해준다.

 

코드를 살펴보면서 조금 더 이해해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    
    <script type="text/babel">

        class Login extends React.Component {
            state = {
                isLogin: false
            }

            onChangeMode = () => {
                const loginChange = {
                    ...this.state,
                    isLogin: !this.state.isLogin
                }

                this.setState(loginChange)
            }

            render() {
                return (
                    <button onClick={ this.onChangeMode }>
                        {this.state.isLogin ? '로그아웃' : '로그인'}
                    </button>
                    // 중괄호{} 안에서 if문 사용 불가
                    // 삼항연산자를 사용해서 조건문을 작성한다.
                )
            }
        }
        
        class App extends React.Component {
            render() {
                return (
                    <div>
                        <Login />
                    </div>
                )
            }
        }

        ReactDOM.render(
            <App />,
            document.querySelector('#root')
        )

    </script>
</body>
</html>

 

위의 코드는 <button>엘리먼트를 사용해서 onClick 이벤트가 발생했을 때 "로그인", "로그아웃"으로 변하는 버튼을 state 와 setState( ) 함수를 이용해 React로 만들어 본 것이다. 짚고 넘어가야할 포인트는 setState( ) 함수를 사용해서 상태를 변경시킬 때는 항상 객체를 새로 바꿔 껴줘야 한다는 것이다. setState( ) 함수의 인자값으로 전달 받은 객체로 state를 변경해주기 때문이다. 위의 코드에서는 setState( ) 함수가 실행되면서 인자값으로 전달받은 loginChange 객체로 state가 변경된 것이다. 

 

 

 

4. counter 버튼 만들기 

(+)버튼을 누르면 값이 1 증가하고 (-)버튼을 누르면 값이 1 감소하는 counter 버튼을 만들어보고자 한다. 위에서 공부한 Props 와 State를 활용해서 만들어보도록 하자. 정답코드는 아래와 같다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    
    <script type="text/babel">

        class Counter extends React.Component {
            
            state = {
                number: 0
            }

            incre = (index) => {
                const increase = {
                    ...this.state,
                    number: this.state.number + index
                }

                this.setState(increase)
            }

            decre = (index) => {
                const decrease = {
                    ...this.state,
                    number: this.state.number - index
                }

                this.setState(decrease)
            }

            render() {

                return (
                    <div>
                        <h3>{this.state.number}</h3>                    
                        <button onClick={ ()=>{ this.incre(1) } }>+</button>
                        <button onClick={ ()=>{ this.decre(1) } }>-</button>
                    </div>
                )
            }
        }
        
        class App extends React.Component {
            render() {
                return (
                    <div>
                        <Counter />
                    </div>
                )
            }
        }

        ReactDOM.render(
            <App />,
            document.querySelector('#root')
        )
    </script>
</body>
</html>

 

 

 

 

 

반응형

'React' 카테고리의 다른 글

React - webpack.config.js  (0) 2022.04.20
React - Webpack  (0) 2022.04.18
React - State 끌어올리기  (0) 2022.04.17
React - 리스트와 Key  (0) 2022.04.15
React 기본 개념  (0) 2022.04.12

티스토리툴바