C-log

⚛️React Training - section04 : Props와 Components 본문

⚛️React/⚡ver.2

⚛️React Training - section04 : Props와 Components

4:Bee 2024. 2. 3. 14:08
728x90

이번 포스팅에서는 props에 관해서 포스팅할 것이다. 이제 우리는 React의 간단한 동작원리와 state의 역할이 무엇인지 잘 알것이다. 이제는 컴포넌트를 나누어서 각 컴포넌트들에게 값을 다르게 전달 해주는 역할을 하는 props를 활용 해야 할 때이다. 얼핏 보기에는 일반적인 함수와 같아 보이겠지만 쓰임세와 활용도들은 조금씩 다르다. 우선 일반 함수와 컴포넌트는 재활용을 하기 아주 적합하다는 것이다. 하지만 일반 함수는 코드 내에서만 그러하다 컴포넌트는 UI와 깊게 연결이 되어 있다. 특히 css를 반복적으로 사용하기 위해서 이전에는 Html에 의존 해야 했지만 컴포넌트에 의존하게 되면서 개별적인 css를 다루게 되는 것이다. 아래 코드는 간단한 컴포넌트를 props와 활용한 코드이다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
</body>
<!-- production.min.js -->
<!-- production.min.js -->
<script type="text/babel">

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

  function App() {
    return (
      <div>
        <Btn text="Save Change" big={true} />
        <Btn text="Continue" big={false} />
      </div>
    )
  }

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

</html>

Btn이라는 컴포넌트 하나로 두개의 각기 다른 버튼을 만들어 낼 수 있다. 앞으로 컴포넌트를 어떻게 활용해야 좋을지 이런 점을 생각하면서 강의를 듣고 코드를 작성하면 좋을 것 같다.

728x90
저작자표시

'⚛️React > ⚡ver.2' 카테고리의 다른 글

⚛️React Training - section04 : propsTypes  (0) 2024.02.03
⚛️React Training - section04 : Memo  (0) 2024.02.03
⚛️React Training : Controlled Component&Uncontrolled Component  (0) 2024.02.02
⚛️React Training : useState의 간단한 원리  (1) 2024.01.26
⚛️React Training : React의 간단한 원리  (1) 2024.01.24
'⚛️React/⚡ver.2' Related Articles more
Comments