React.JS) React.JS - 5. Props

송민경

Sep 22, 2024

Contents

1. Props

컴포넌트의 인자

부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있음

2. 초기상태


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function App() {
      return (
        <div>
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

3. 버튼 만들기


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function SaveBtn() {
      return <button style={{
        backgroundColor: "orange",
        color: "white",
        padding: "10px 20px", 
        border: 0,
        borderRadius: 10, 
      }}>저장</button>;
    }

    function ConfirmBtn() {
      return <button style={{
        backgroundColor: "green",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10, 
      }}>확인</button>;
    }

    function App() {
      return (
        <div>
          <SaveBtn />  
          <br />
          <ConfirmBtn />
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({ text }) {
      return <button style={{
        backgroundColor: "orange",
        color: "white",
        padding: "10px 20px", 
        border: 0,
        borderRadius: 10, 
      }}>{text}</button>;
    }

    function App() {
      return (
        <div>
          <Btn text="저장" />  
          <br />
          <Btn text="확인" />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

컴포넌트의 첫번째 인자이자 유일한 인자


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn(props) {
      console.log(props); 

      return <button style={{
        backgroundColor: "orange",
        color: "white",
        padding: "10px 20px", 
        border: 0,
        borderRadius: 10, 
      }}>{props.text}</button>;
    }

    function App() {
      return (
        <div>
          <Btn text="저장" />  
          <br />
          <Btn text="확인" />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text}) {

      return <button style={{
        backgroundColor: "orange",
        color: "white",
        padding: "10px 20px", 
        border: 0,
        borderRadius: 10, 
      }}>{text}</button>;
    }

    function App() {
      return (
        <div>
          <Btn text="저장" />  
          <br />
          <Btn text="확인" />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

4. Props 사용하기

추가 데이터 전달하기


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text, big}) {
      console.log(text, big);

      return <button style={{
        backgroundColor: "orange",
        color: "white",
        padding: "10px 20px", 
        border: 0,
        borderRadius: 10, 
      }}>{text}</button>;
    }

    function App() {
      return (
        <div>
          <Btn text="저장" big={true} />  
          <br />
          <Btn text="확인" big={false}  />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

버튼의 크기를 조정하는데 사용

oolean 값에 따라 CSS 스타일을 동적으로 적용


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text, big}) {
      console.log(text, big);

      return <button style={{
        backgroundColor: "orange",
        color: "white",
        padding: "10px 20px", 
        border: 0,
        borderRadius: 10, 
        fontSize: big? 18: 10
      }}>{text}</button>;
    }

    function App() {
      return (
        <div>
          <Btn text="저장" big={true} />  
          <br />
          <Btn text="확인" big={false}  />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

5. State와 동적 값

이벤트 리스너가 아닌 props의 이름

onClick 은 HTML 태그에서 사용하는 이벤트 리스너
React에서는 이를 props로 전달받아 사용

HTML 태그 안에 들어가지 않아 직접 넣어야 함

State와 Props의 차이

state: 컴포넌트 내에서 관리되는 값
props: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text, onClick}) {

      return <button 
        onClick={onClick}
        style={{
          backgroundColor: "orange",
          color: "white",
          padding: "10px 20px", 
          border: 0,
          borderRadius: 10, 
        }}>{text}</button>;
    }

    function App() {
      const [value, setValue] = React.useState("저장하기");
      const changeValue = () => setValue("되돌리기");

      return (
        <div>
          <Btn text={value} onClick={changeValue}/> 
          <br />
          <Btn text="확인" />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

부모 컴포넌트에서 state가 변경될 때 내부가 새로 그려짐

부모의 상태를 바꾸는 함수를 만들어서 자식이 실행시키게 함


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text, onClick}) {
      console.log(text, "렌더링됨");
      
      return <button 
        onClick={onClick}
        style={{
          backgroundColor: "orange",
          color: "white",
          padding: "10px 20px", 
          border: 0,
          borderRadius: 10, 
        }}>{text}</button>;
    }

    function App() {
      const [value, setValue] = React.useState("저장하기");
      const changeValue = () => setValue("되돌리기");

      return (
        <div>
          <Btn text={value} onClick={changeValue}/> 
          <br />
          <Btn text="확인" />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

6. React Memo

컴포넌트 상태를 바꾸면 리렌더링한다는 것을 알고 있음

props가 변경되지 않는다면 컴포넌트를 다시 그릴지 말지를 결정할 수 있음

성능 최적화에 사용

부모의 상태가 바껴서 다 리렌더링된다면 속도가 저하될 수 있음

자식 컴포넌트의 props가 변경되지 않는 한 리렌더링을 방지

변경되는 부분만 리렌더링하기


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text, onClick}) {
      console.log(text, "렌더링됨");
      
      return <button 
        onClick={onClick}
        style={{
          backgroundColor: "orange",
          color: "white",
          padding: "10px 20px", 
          border: 0,
          borderRadius: 10, 
        }}>{text}</button>;
    }

    const MemorizatonBtn = React.memo(Btn);
  
    function App() {
      const [value, setValue] = React.useState("저장하기");
      const changeValue = () => setValue("되돌리기");

      return (
        <div>
          <MemorizatonBtn text={value} onClick={changeValue}/> 
          <br />
          <MemorizatonBtn text="확인" />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

7. Props Types

컴포넌트 내부에 많은 props가 있으면 문제가 발생

어떤 타입의 props를 받고 있는지 체크해줌


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text, fontSize}) {
      
      return <button 
        style={{
          backgroundColor: "orange",
          color: "white",
          padding: "10px 20px", 
          border: 0,
          borderRadius: 10, 
          fontSize
        }}>{text}</button>;
    }
  
    function App() {
  
      return (
        <div>
          <Btn text="저장" fontSize={18} /> 
          <br />
          <Btn text="확인" />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

문법적으로 에러는 없으나 우리가 쓰는 props 안에서는 오류가 남


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.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@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({text, fontSize}) {
      
      return <button 
        style={{
          backgroundColor: "orange",
          color: "white",
          padding: "10px 20px", 
          border: 0,
          borderRadius: 10, 
          fontSize
        }}>{text}</button>;
    }

    function App() {
  
      return (
        <div>
          <Btn text="저장" fontSize={18} /> 
          <br />
          <Btn text="확인" fontSize={"계속"} />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

Btn컴포넌트의 props가 올바르게 전달되고 있는지 확인하기


PropTypes


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({ text, fontSize }) {
      return (
        <button 
          style={{
            backgroundColor: "orange",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10, 
            fontSize
          }}>
          {text}
        </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn text="저장" fontSize={18} /> 
          <br />
          <Btn text="확인" fontSize={"계속"} />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

propsType으로 점검하기

코드 자체에는 에러가 없기 때문에 React.JS는 에러를 표시하지 않음

propsType로 React.JS에게 props들의 타입을 알려주고 체크 받기


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function Btn({ text, fontSize }) {
      return (
        <button 
          style={{
            backgroundColor: "orange",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10, 
            fontSize
          }}>
          {text}
        </button>
      );
    }

    Btn.propTypes = {
      text: PropTypes.string, 
      fontSize: PropTypes.number
    };

    function App() {
      return (
        <div>
          <Btn text="저장" fontSize={18} /> 
          <br />
          <Btn text="확인" fontSize={"계속"} />  
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

See more posts

React.JS) React.JS - 5. Props

1. Props

2. 초기상태

3. 버튼 만들기

4. Props 사용하기

5. State와 동적 값

6. React Memo

7. Props Types

More articles

React.JS) 2. Create React App 사용하기

React.JS) 1. 프로젝트 생성하기

React.JS) React.JS - 4. 거리 계산기 App 만들기

React.JS) React.JS - 3. 시간 계산기 App 만들기