리액트 props와 state

뿌이·2022년 4월 13일

react 15버전

목록 보기

1/17

먼저 벨로퍼트님의 4편 참고했음
create-react-app 라이브러리 이용해서 프로젝트 생성 후,
안에 들어있는 app.js, index.js 수정했으며,
MyName.js 만들었음

props와 state

먼저 리액트는 상태값 변경하는게 거의 전부라고 봐도 무방한데,
리액트 컴포넌트에서 다루는 데이터는 2개이다

props

부모 컴포넌트가 자식 컴포넌트에게 주는 값.
자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수 없다.

state

컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.

props실습

MyName.js

import React, { Component } from 'react';

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    //   내가 받아온 props 값은 this. 키워드를 통하여 조회 가능
    );
  }
}

export default MyName;

App.js

import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() { //app이 부모, myName한테 props로 name을 리액트로 설정함
    return (
      <MyName name="리액트" />
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import List from './List';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이런 화면을 볼 수 잇따.
app.js에서 <myName>컴포넌트에 name을 지정해주어서,
이게 props로 간 것이다.
그래서 myName컴포넌트에서 this.props.name으로 값을 조회할 수 있다.

props만 받아오는 컴포넌트 더 간편하게 작성하는 법

MyName.js

import React from 'react';

const MyName = ({ name }) => { //내가 MyName이라는 것을 선언 하고, name을 받아와서 사용하겠다.
  return (
    <div>
      안녕하세요! 제 이름은 {name} 입니다.
    </div>
  );
};

export default MyName;

이걸 함수형 컴포넌트라고 하는거같다

App.js

위의 app.js와 같음

index.js

위의 index.js와 같음

결과창이다 결과는 똑같이 나옴

state 실습

Counter.js

import React, { Component } from 'react';

class Counter extends Component {
  state = { // class fileds 
    number: 0 //클래스 필드는 constructor이랑 비슷한 역할을 하지만,
  } // 같이 사용된다면 class field -> constructor 순으로 실행됨

  handleIncrease = () => { //화살표 있는 형태가 효율적임 (this가 풀리지 않기 때문)
    const { number } = this.state; //지금 상태를 number이라 하겠음.
    this.setState({
      number: number + 1 //상태를 number+1로 세팅
    });
  }

  handleDecrease = () => {
    this.setState(
        ({ number }) => ({
          number: number - 1
        })
      );
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

주의할 점은 onClick={this.handleIncrease()} 이런식으로 하면 안된다고 한ㄷㅏ.
무한 반복된다고,,,,,,,,,,

App.js

import React, { Component } from 'react';
import Counter from './Counter';

class App extends Component {
  render() {
    return (
      <Counter/>
    );
  }
}

export default App;