React props, state 사용법

1. React props

- React에서 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로

  컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다.

  props을 바꾸려면 부모 컴포넌트에서 바꿔주어야 합니다.

 

1) 함수형 컴포넌트

function ExampleComponent(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default ExampleComponent;

 

1-1) 함수형 컴포넌트, 화살표 함수 문법

const ExampleComponent = (props) => {
  return <div>{props.name}</div>;
}
export default ExampleComponent;

// 또는

const ExampleComponent = ({ name, age }) => {
  return (
    <>
    	<div>{name}</div>
    	<div>{age}</div>
    </>
  )
}
export default ExampleComponent;

 

2) 클래스형 컴포넌트

class ExampleComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
export default ExampleComponent;

// 또는

class ExampleComponent extends React.Component {
   render() {
      const { name } = this.props;
      return (
         <h1>Hello, {name}</h1>
      )
   }
}
export default ExampleComponent;

 

3) 공통, 컴포넌트로 데이터 넘겨주기

...
import ExampleComponent from '../components/Example/ExampleComponent'

class Example extends React.Component {
    render() {
        return (
            <ExampleComponent name="example" age="20" />
        )
    }
}
export default Example;

 

그리고 위와 같이 데이터를 props으로 넘겨주기만하면 됩니다.

 

2. React state

- React에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.

 

1) 함수형 컴포넌트, Hook useState

import React, { useState } from 'react'

const ExampleComponent = () => {

    // useState 함수의 인자에는 상태의 초깃값을 넣어줍니다. ""
    // 값의 형태는 자유입니다. 숫자, 문자열, 객체, 배열.
    const [name, setName] = useState("");
    const [age, setAge] = useState("");

    const onChangeName = e => {
    	// 이름 값 변경
        setName(e.target.value);
    };
    const onChangeAge = e => {
        // 나이 값 변경
        setAge(e.target.value);
    };

    return (
        <div>
            name: <input value={name} onChange={onChangeName} /><br/>
            age: <input value={age} onChange={onChangeAge} /><br/><br/>
            
            name: {name}<br/>
            age: {age}
        </div>
    )
}
export default ExampleComponent;

 

2) 클래스형 컴포넌트, state

import React from 'react'

export default class ExampleComponent extends React.Component {

    constructor(props) {
      super(props);

      // state의 초깃값 설정하기
      this.state = {
          name: '',
          age: '',
          number: 0
      }
    }
    
    onChangeName = e => {
        this.setState({ name: e.target.value });
    };
    onChangeAge = e => {
        // this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다. 
        this.setState({ age: e.target.value });
    };
    
    render() {
      const { name, age } = this.state;
      return (
        <div>
            name: <input value={name} onChange={this.onChangeName} /><br/>
            age: <input value={age} onChange={this.onChangeAge} /><br/><br/>
            
            name: {name}<br/>
            age: {age}
            
            example: <button onClick={() => {
                         this.setState({ number: number + 1 });
                     }}
                     >+1</button>
        </div>
      )
    }
  }

 

3) 값을 업데이트 한 후, 바로 실행

<button onClick={() => {
    this.setState(
        {
            number: number + 1
        },
        () => {
            console.log("값을 업데이트한 후, 바로 실행.");
            console.log(this.state);
        }
    );
}}
>+1</button>

 

https://ko.reactjs.org/docs/components-and-props.html

https://ko.reactjs.org/docs/hooks-state.html

https://ko.reactjs.org/docs/hooks-overview.html

https://velog.io/@solmii/React%EC%9D%98-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-feat.Hooks