⚛️React : training - 버튼과 컴포넌트

우리는 컴포넌트 외부에서 내부로 값을 전달하는 정도만 배웠다. 하지만 내부에서 외부로 전달이 필요하다 느꼈다. 아래 코드를 살펴보자.

*App.js

import { useState } from 'react';

import './App.css';

import Calculate from "./section/training/Calculate"

function App() {

  const [result, setResult] = useState()

  const handleShow = (show) => {

    console.log("show", show);

    setResult(show)

  }

  return (

    <div>

      <h3>{result}</h3>

      <Calculate value={1} onClick={handleShow}></Calculate>

      <Calculate value={2} onClick={handleShow}></Calculate>

      <Calculate value={3} onClick={handleShow}></Calculate>

    </div>

  );

}

export default App;

오로지 app컴포넌트에서 calculate 컴포넌트만을 사용해서 calculate컴포넌트로 전달 받은 값을 h3로 넘겨받는 모습이다. 우선 어떻게 내부 컴포넌트가 show라는 매개변수로 값을 전달 받았는지 알아 보기 전에 브라우저를 동적으로 만들기 위해선 useState를 사용해야 한다는 것을 인지 하자.

* Calculate.js

import { useState } from "react";

export default function Calculate(props) {

  const [value, setValue] = useState()

  const show = () => {

    setValue(props.value);

    if (props.onClick) {

      props.onClick(value);

    }

  }

  return (

    <div>

      <button onClick={show}>test</button>

    </div>

  );

}

그렇다면 어떻게 App컴포넌트에 Calculate 컴포넌트의 값이 전달 될까? 그것은 바로 props다. 우리가 App컴포넌트에서 Calculate 컴포넌트에 onClick이라는 프로퍼티를 설정했다. 설정 프로퍼티를 props 함수로 가지고와서 내부에서 설정을 해주는 것이다. 그러면 해당 props함수의 매개변수가 외부로 전달해준다. 그렇게 전달 된 값을 h3에 전달 해주면 된다. 여기서 잠시 짚어볼 것이 있다. props.onClick(value)로 작성하면 간혹 결과가 undfined가 나오는 경우가 있다. 왜그러냐면 react의 성능 최적화 때문이다. useState는 비동기적으로 돌아가기 때문으로 이전 상태값이 최신화가 되었는지 확인하는 코드가 필요하다. 그 방법은 함수형으로 업데이트 하면 된다. React Hook은 함수형이기 때문에 이를 안전하게 구동하기 위해서는 함수형으로 처리해야 하기 때문이다.

 

import { useState } from "react";

export default function Calculate(props) {

  const [value, setValue] = useState();

  const show = () => {

    setValue(() => {

      if (props.onClick) {

        props.onClick(props.value);

      }

      return props.value;

    });

  };

  return (

    <div>

      <button onClick={show}>{props.value}</button>

    </div>

  );

}

만약 최신화 고려와 value를 사용하지 않고 바로 사용하기 위해선 props를 이용해서 value값을 직접적으로 호출 하면 된다. 즉, 여기서 사용되는 setValue는 더이상 필요 없다. 이에 맞춰서 다음으로 넘어가자.

이제 이 상태로 App에서 계산기에 필요한 기호와 숫자를 Calculate 컴포넌트를 사용해 만들어 내면 아래와 같다.

* App.js

import { useState } from 'react';

import './App.css';

import Calculate from "./section/training/Calculate"

function App() {

  const [result, setResult] = useState()

  const handleShow = (show) => {

    console.log("show", show);

    setResult(show)

  }

  return (

    <div>

      <h3>{result}</h3>

      <Calculate value={'AC'} onClick={handleShow}></Calculate>

      <Calculate value={'+'} onClick={handleShow}></Calculate>

      <Calculate value={'-'} onClick={handleShow}></Calculate>

      <Calculate value={'x'} onClick={handleShow}></Calculate>

      <Calculate value={'/'} onClick={handleShow}></Calculate>

      <Calculate value={'='} onClick={handleShow}></Calculate>

      <Calculate value={1} onClick={handleShow}></Calculate>

      <Calculate value={2} onClick={handleShow}></Calculate>

      <Calculate value={3} onClick={handleShow}></Calculate>

      <Calculate value={4} onClick={handleShow}></Calculate>

      <Calculate value={5} onClick={handleShow}></Calculate>

      <Calculate value={6} onClick={handleShow}></Calculate>

      <Calculate value={7} onClick={handleShow}></Calculate>

      <Calculate value={8} onClick={handleShow}></Calculate>

      <Calculate value={9} onClick={handleShow}></Calculate>

    </div>

  );

}

export default App;

* Calculate.js

export default function Calculate(props) {

  const show = () => {

    if (props.onClick) {

      props.onClick(props.value);

    }

  }

  return (

    <div>

      <button onClick={show}>{props.value}</button>

    </div>

  );

}

이제 잘 동작한다. 다음 시간에는 이 것들을 결과 창에 하나의 식으로 표현되는 것을 완성해 볼 것이다.