My Develop Log

[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(4) 본문

React 공부/노마드코더 노트정리

[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(4)

Developer_Sammy 2022. 12. 8. 16:08

props 사용하여 부모 컴포넌트로 부터 자식 컴포넌트에 데이터 보내기

  • Btn 스타일 재사용할 수 있다.
  • props는 오브젝트로 Btn이 전달 받는 첫번째이자 유일한 인자이다.

props 개념 예시(부모 컴포넌트)
props 개념 예시(자식 컴포넌트)

다음과 같이 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내면, 자식 컴포넌트에선 props와 함께 해당 값을 전달 받아 사용할 수 있다. props로 전달을 받으면 props.text를 통해 참조 해야하지만, 만약 function Btn({text}){ 이렇게 직접 전달 받으면 단순히 text만으로 참조 가능하다.

만약 부모 컴포넌트에서 onClick={changeValue} 처리를 하더라도 이는 단순히 이벤트 리스너가 아닌 단순 props이기 때문에 직접적으로 자식 컴포넌트의 return에 적용되지 않는다.

 

Memo를 사용하여 props가 변한 컴포넌트만 리렌더링 해주기

다음과 같이 메모를 하나 만들어준다.

const MemorizedBtn = React.memo(Btn);

memo 개념 예시

그 후 렌더링 해주는 부분에 <Btn text="Continue" big={false} /> 대신, 방금 정의해준 memo 개념을 활용하여 <MemorizedBtn text="Continue" big={false} /> 처럼 써준다.

이렇게 memo 개념을 사용하면 불필요한 리렌더링을 줄일 수 있기 때문에 알아두면 좋을 것 같다.

 

전체코드

<!DOCTYPE html>
<html lang="en">
  <head>
   
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
<!-- props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 -->
  <script type="text/babel">
    //버튼 스타일 재사용하기
    //props는 오브젝트로 Btn이 전달 받는 첫번째이자 유일한 인자
    //function Btn({ text }) { 이런식으로 받으면 props.text가 아닌 text로만 쓸 수 있음
    function Btn(props) {
      console.log(props.text);
      return (
        <button
            onClick={props.ChangeValue}
            style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            //fontSize: props.big ? 18: 16,
          }}
        >
          {props.text}
        </button>
      );
    }
    // memo는 props가 변한다면 다시 그려주고 안변하면 그대로 둬라.
    const MemorizedBtn = React.memo(Btn);
    //여기서 사용된 onClick은 이벤트 리스너가 아님.
    //prop은 직접적으로 return에 들어가지 않는다
    function App() {
        const [value, setValue] = React.useState("Save Changes");
        const ChangeValue = () => setValue("Revert Changes");
      return (
        <div>
          <MemorizedBtn text={value} ChangeValue={ChangeValue} />
          <MemorizedBtn text="Continue" big={false} />
        </div>
      );
    }
    const root = document.getElementById("root");
    //render은 사용자에게 보여주는것
    ReactDOM.render(<App />, root);
  </script>
</html>​

 

Reference

React로 영화 웹 서비스 코딩 강의 - 노마드코더

'React 공부 > 노마드코더 노트정리' 카테고리의 다른 글

[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(6)  (0) 2022.12.16
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(5)  (0) 2022.12.08
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(3)  (0) 2022.12.07
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(2)  (0) 2022.12.07
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(1)  (0) 2022.12.07
'React 공부/노마드코더 노트정리' Related Articles more