React / props, state 끌어올리기

Props (property)

props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 정보의 집합으로, 객체 형태로 데이터를 포함하고 있다.

 

특징

• React 내에서 속성으로 사용됨
• 읽기전용(Read-only)임
• 부모로부터 전달된 Props는 자식 컴포넌트에서 변경 불가능
  (정의된 데이터를 수정하려면 부모 컴포넌트에서 데이터를 변경해야 함)

 

사용 방법

부모 컴포넌트

<자식 컴포넌트 props이름 = {props} />

 

자식 컴포넌트 

// 함수형
function 자식 컴포넌트 ({props이름}){}

// 클래스형
super(props)
props.props이름
// 또는
this.props.props이름

 

 

이전 글(상태관리)에서 사용했던 counter 코드를 이용해서 props를 확인해보겠다.

 

객체 형태로 전달되고 있는 props

 

부모 컴포넌트에서 Count(자식 컴포넌트의 이름) 요소를 만들고, 그 안에 counter와 hello라는 props를 전달했고,

자식 컴포넌트인 Count에서 파라미터 props를 추가해 받아와 사용할 수 있다.

실제로 중간에 hello prop를 추가한 뒤로는 hello도 콘솔창에 출력되고 있음을 알 수 있다.

 

<Count counter={counter} />

 

이 때 왼쪽의 counter는 Count 컴포넌트에서 받을 props의 이름,

오른쪽 {counter}는 App 컴포넌트에서 관리하는 counter의 상태 값이다.

App 컴포넌트에서 counter의 상태를 Count에 전달해 값을 사용할 수 있게 해주는 것이다. 

 

위처럼 props 객체를 모두 가져왔을 때 counter 데이터를 화면에 반영하고 싶다면 아래와 같이 써줄 수 있다.

function Count(props) {
  console.log(props);
  return <div>counter : {props.counter}</div>
}

 

 

또는 다음과 같이 구조분해할당으로 가져올 수도 있다. 

구조분해할당을 할 때는 {}로 제발 꼭 묶어줘야한다. 안하면...

 

파라미터에서 맨 앞에 위치해있는 counter에 props객체가 모두 들어가게 되고 hello랑 array는 undefined가 된다...

 

function App() {
  const [counter, setCounter] = useState(0)

  function increase() {
    setCounter((prev)=>prev+1);
  }

  function decrease() {
    setCounter((prev)=>prev-1);
  }
  return (
    <>
    <Count counter={counter} hello={"hello"} array={[1, 2, 3, "안녕하세요"]}/>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </>
  );
}

// {}로 묶어서 구조분해할당으로 가져오기
function Count({counter, array, hello}) {
  console.log('array', array);
  console.log('counter', counter);
  console.log('hello', hello);
  return <div>counter : {counter}</div>
}

 

 

 

+ 클래스 컴포넌트로 구성하기

 

import { Component } from "react";
import "./App.css";

class App extends Component {
  state = { counter: 0 };
  increase = () => {
    this.setState((prevState) => ({
      counter: prevState.counter + 1,
    }));
  };

  decrease = () => {
    this.setState((prevState) => ({
      counter: prevState.counter - 1,
    }));
  };
  render() {
    return (
      <div>
        <Count counter={ this.state.counter }/>
        <button onClick={this.increase}>+</button>
        <button onClick={this.decrease}>-</button>
      </div>
    );
  }
}

class Count extends Component {
  // 방법 #1. constructor를 생성해 super 키워드를 사용
  // 방법 #2. constructor 생성 안하고 그냥 받아오기 (만약 생성 안할 시 기본으로 constructor가 생성되기 때문임)
  constructor(props){
    super(props);
  }
  render(){
    return <div>counter : {this.props.counter}</div>
  }
}

export default App;

 

 

 

---

 

 

State 끌어올리기 

 

리액트에서는 데이터의 흐름이 늘 부모 → 자식으로 향하는 단방향 데이터 흐름을 가지는데, 이 때 두개 이상의 자식 컴포넌트 간 동일한 상태를 공유해야 할 때 그 상태를 공통된 부모 컴포넌트로 올려야 한다. 이렇게 함으로써 자식 컴포넌트 상태를 공유하면서도 서로 동기화된 UI를 만들 수 있어 데이터 일관성 유지, 변경 감지, 재사용성이 보장된다.

 

 

 

#방법 1 : 자식 컴포넌트에서 계산하기

우선 위의 counter 예제에서 기존의 버튼들을 PlusBtn, MinusBtn의 컴포넌트로 따로 생성했다.

 

그리고 input 하나가 추가됐다. 자식컴포넌트 CounterInput로 생성했고, input의 상태도 따로 선언했다. 기능은 다음과 같다.
* input에 숫자를 입력 => 입력 버튼을 누르면 counter의 값이 변경 => 화면에 반영

 

이 때 자식 컴포넌트가 각각 const [counter, setCounter] = useState(0); ~~~ 등 상태를 가지고 있다면, 버튼끼리 상태가 공유되지 않아 counter의 값이 엉망이 될 것이다. 하지만 State를 끌어올리면 자식 컴포넌트에서 자유롭게 상태를 변경해 부모에게 전달할 수 있다.

 

function App() {
  const [counter, setCounter] = useState(0);
  const [inputValue, setInputValue] = useState(5);

  return (
    <>
      <Count counter={counter} />
      <PlusBtn setCounter={setCounter} />
      <MinusBtn setCounter={setCounter} />
      <CounterInput inputValue={inputValue} setInputValue={setInputValue} setCounter={setCounter} />
    </>
  );
}

PlusBtn, MinusBtn 자식 컴포넌트들에게 props에 setCounter를 담아 넘겨줬고,

CounterInput에게는 input의 상태값과 상태 변경 함수, 그리고 counter의 값도 변경해주기 위해 setCounter까지 props으로 넘겨줬다.

 

자식 컴포넌트에서는 다음과 같이 버튼 요소와 상태를 직접 변경하고 있다.

 

function PlusBtn({ setCounter }) {
  return (
    <button onClick={() => { setCounter(prev => prev + 1); }}>+</button>
  );
}

function MinusBtn({ setCounter }) {
  return (
    <button onClick={() => { setCounter(prev => prev - 1); }}>-</button>
  );
}

function Count({ counter }) {
  return <div>counter : {counter}</div>;
}

 

 

CounterInput 컴포넌트는 다음과 같다.

function CounterInput({ inputValue, setInputValue, setCounter }) {
  return (
    <div>
      <input type="number" value={inputValue} onChange={e => setInputValue(e.target.value)} />
      <button onClick={() => setCounter(inputValue)}>입력</button>
    </div>
  );
}

 

input의 value값을 {inputValue}로 설정했고, onChange 이벤트가 발생할 경우 setInputValue의 값을 이벤트 타겟의 value(즉 input에 적은 값)

만약 onChange이벤트를 설정하지 않으면 처음 선언할 때의 useState(5)에서 변경되지 않는다.

 

그리고 위와 같은 경고를 띄워준다!

 

그리고 입력 버튼에 onClick 이벤트를 추가해 클릭 시 setCounter로 counter의 값이 inputValue의 값으로 변경되게한다.

이 때 이렇게 input 요소의 값과 리액트의 상태와 완전히 연동되어있을 때, 해당 컴포넌트를 Controlled Component 라고도 한다.

 

 

 

#방법 2.  부모 컴포넌트에서 계산 함수를 내려주기

 

onClick시 상태를 직접 변경해주는 부분을 부모 컴포넌트에서 함수를 표현하고, 함수를 props로 보내고 있다. 

그리고 클릭 시 counter의 값을 inputValue로 바꿔주는 함수 setCounternumber를 추가했기 때문에,

CounterInput 컴포넌트에도 기존의 setCounter가 아닌 setCounternumber를 props로 넘겨주고 있다.

 

function App() {
  const [counter, setCounter] = useState(0);
  const [inputValue, setInputValue] = useState(5);

  const incrementCounter = () => {
    setCounter(counter + 1);
  };
  const decrementCounter = () => {
    setCounter(counter - 1);
  };
  const setCounternumber = () => {
    setCounter(inputValue);
  };

  return (
    <>
      <Count counter={counter} />
      <PlusBtn incrementCounter={incrementCounter} />
      <MinusBtn decrementCounter={decrementCounter} />
      <CounterInput inputValue={inputValue} setInputValue={setInputValue} setCounternumber={setCounternumber} />
    </>
  );
}

 

자식 컴포넌트들은 다음과 같다.

setCounter해주는 실행되는 내용을 부모에서 선언해 props로 다 보냈기 때문에 onClick시 실행 내용 함수를 그대로 넣어주면 된다.

 

function CounterInput({ inputValue, setInputValue, setCounternumber }) {
  return (
    <div>
      <input type="number" value={inputValue} onChange={e => setInputValue(e.target.value)} />
      <button onClick={setCounternumber}>입력</button>
    </div>
  );
}

function PlusBtn({ incrementCounter }) {
  return <button onClick={incrementCounter}>+</button>;
}

function MinusBtn({ decrementCounter }) {
  return <button onClick={decrementCounter}>-</button>;
}

function Count({ counter }) {
  console.log('counter', counter);
  return <div>counter : {counter}</div>;
}

 

 

 

+ 클래스 컴포넌트로 구성하기

 

class App extends Component {
  state = { counter: 0 };

  incrementCounter = () => {
    this.setState({counter : this.state.counter + 1})
  };
  decrementCounter = () => {
    this.setState({counter : this.state.counter - 1})
  }

  render() {
    return (
      <>
        <Count counter={ this.state.counter }/>
        <PlusBtn incrementCounter={this.incrementCounter}/>
        <MinusBtn decrementCounter={this.decrementCounter} />
      </>
    );
  }
}

class PlusBtn extends Component {
  render(){
    return (
      <button onClick={this.props.incrementCounter}>+</button>
    )
  }
}

class MinusBtn extends Component {
  render(){
    return (
      <button onClick={this.props.decrementCounter}>-</button>
    )
  }
}

class Count extends Component {
  render(){
    return <div>counter : {this.props.counter}</div>
  }
}