(TIL7) React.js 기초개념_state,props

져니·2021년 7월 8일

Props React State 리액트기초

React

목록 보기

7/12

오늘은 리액트에서 데이터를 전달하는데 쓰이는 자바스크립트 객체에 대해서 정리하려고 합니다!

React에서는 데이터를 저장하는데 사용되는 대표적인 자바스크립트 객체가 두가지 있는데 그것이 바로 state와 props입니다.

🌟 state,props 구조도

1. state가 무엇인가❓

state => 해당 컴포넌트 안에서 값 선언 및 수정 가능

다음과 같이 state로는 각 컴포넌트 안에서만 값을 불러오거나 변경할 수 있다

✔ state 쓰는법

state를 쓰기 위한 기본 코드는 다음과 같습니다.
(babel을 셋팅해주면 더 간결하게 쓸 수 있습니다)

class A extends React.Component{
        constructor(props){
                super(props)
                this.state = {
                    name: 'jihyun',
                    age: 27
                }
            }
        render(){
            return;
      }
}

이제 state안에 쓴 정보들을 이용해서 자기소개를 해보겠습니다.

        render(){
            return(
                <>
                    Hi my name is {this.state.name}<br />
                    I'm {this.state.age} years old
                </>

            )
        }

render안의 코드를 다음과 같이 수정해줍니다.

state에서 저장한 데이터를 불러오기 위해서는 {this.state.변수명} 형식으로 불러 올 수 있습니다.
중괄호안에만 자바스크립트 표현식을 넣을 수 있기에 꼭 중괄호로 감싸줘야합니다!

💻 결과물

✔ babel 사용해서 state 쓰는법

babel을 사용하면 더 짧은 코드로 state 객체에 데이터를 저장해줄 수 있습니다.


    class A extends React.Component{
        state = {
            name: 'jihyun',
            age:27
        }
        render(){
            return;
        }
    
    }

⚙ babel세팅법

1) header 부분에 바벨 스크립트 코드 넣어주기

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2) body안의 스크립트 태그 다음과 같이 작성해주기

<script type="text/babel">
</script>

💻 결과물

결과물은 위와 같습니다!

전체코드(바벨사용)

<!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>state&props</title>
    <link rel="stylesheet" href="./example6.css">
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    
    <div id="root"></div>
    <script type="text/babel">

    class A extends React.Component{
        state = {
            name: 'jihyun',
            age:27
        }
        render(){
            return(
                <>
                    Hi my name is {this.state.name}<br />
                    I'm {this.state.age} years old
                </>

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

2. props가 무엇인가❓

props => 부모 컴포넌트에서 변수명을 지정해서 보내준 값, 자식컴포넌트에서는 수정 불가능

여기서 부모컴포넌트는 A를 의미하고, 자식컴포넌트는 B와 D를 의미한다.
A컴포넌트 안에서 state로 저장했던 데이터 값들을 변수안에 담아서 B컴포넌트로 보내주는 것이 가능하고, A컴포넌트로부터 받은 값을 B컴포넌트에서 props로 불러와 사용할 수 있다. 수정은 불가능하다!

✔ props쓰는법

B라는 컴포넌트를 하나 더 만들어주고 B 컴포넌트로 A 컴포넌트의 정보들을 변수에 담아 보내줄 것입니다.

class A extends React.Component{
        state = {
            name: 'jihyun',
            age:27
        }

        render(){
            return(
                <B name={this.state.name} age={this.state.age}/>
            )
        }
    }

A컴포넌트 안에 B컴포넌트를 불러올때는

<B />

다음과 같이 적고, B 컴포넌트를 불러옴과 동시에 A 컴포넌트의 정보를 B컴포넌트에 보내주고 싶을때는 다음과 같이 적습니다!

<B 변수명={this.state.state안의 보낼 데이터}/>

B컴포넌트의 값은 다음과 같이 적어줍니다!

    class B extends React.Component{
        state = {
            sname:'semin',
            sage:30
        }

        render(){
            return(
                <>
                    Hi my name is {this.state.sname}<br />
                    I'm {this.state.sage} years old<br />
                    <br />
                    Oh, Hi my name is {this.props.name}<br />
                    I'm {this.props.age} years old<br />
                </>

            )
        }

    }