rhanziy

react. props 본문

React

react. props

rhanziy 2022. 3. 10. 16:25 
<!DOCTYPE html>
<html>
  <head></head>
  <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/babel.min.js"></script>
  <script type="text/babel">
    function Btn({text, onClick, fontSize = 14}){
      return (
        <button 
          onClick = {onClick}
          style={{
            backgroundColor:"purple",
            color:"white",
            padding:"10px 20px",
            border:0,
            borderRadius:10,
            fontSize,
          }}
        >
        {text}
        </button>
      );
    };
    //const MemorizedBtn = React.memo(Btn); 
    // 불필요한 리렌더링을 관리! 상태변화가 없으면 렌더링하지 않는다.
    Btn.propTypes = {
      text: PropTypes.string.isRequired,
      fontSize:PropTypes.number,
    } 
    // prop-types.js를 포함해주면 props의 타입 검사 가능! 
    function App(){
      const [value, setValue] = React.useState("Save Change");
      const changeValue = () => setValue("Revert Changes");
      return(
        <div>
          <Btn text={value} onClick={changeValue} fontSize={18} />
          <Btn text={"Continue"} />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

 

App 컴포넌트 내에 html들에 속성으로 props를 부여할 수 있다.

App컴포넌트 내에서 지정한 props들은 단독으로는 실행이안되고 Btn 컴포넌트에 파라미터로 전달해줘야한다!!

-> 그냥 이름일 뿐 속성에 대한 값은 실행되는 컴포넌트에서 정의한다.

function Btn(props){
  return(
    <button
      style = {{
      fontSize = props.fontSize
    }}
  );
}

function App(){
  return(
    <Btn fontSize={18} />
  );
}

이런식으로 props를 매개변수로 주고 props.name으로 사용하는 형식도 가능하지만 요즘엔 잘 안쓰고 각각의 props.name을 ({ }) 객체형식으로 전달한다.

만약 fontSize = fontSize(props이름); 으로 동일하다면 fontSize만 작성 가능하다.

저번 게시글에서도 언급했듯 state가 바뀌면 리렌더링, 리프레쉬가되는데 같은 이름의 컴포넌트를 사용하면서도 props는 각각 다르게 지정할 수 있기때문에 서로 상태변화가 다를 수가 있다.

그럴때마다 App내의 컴포넌트가 전체 리렌더링이 된다면 자원낭비가 생기기때문에

React.memo();  함수를 이용해서 불필요한 리렌더링을 관리할 수 있다.

const MemorizedBtn = React.memo(Btn);

변수 선언을 하고 Btn컴포넌트를 MemorizedBtn으로 대체하면 된다.

또, typescript로 작성한다면 필요없는 과정이지만 props의 타입을 지정해줄 수 있다. 

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

이렇게 Btn컴포넌트 안 각각의 props들이 필수인지, 어떤 타입인지를 정의해두고 혹시라도 오류가 생기면 개발자도구에서 에러메세지를 확인할 수 있다.

 

저작자표시 비영리 변경금지

'React' 카테고리의 다른 글

react. Todo 리스트  (0) 2022.03.11
react. css, useState, useEffect  (0) 2022.03.10
react - State생성2  (0) 2022.03.08
react - State 생성  (0) 2022.03.08
react. JSX - Create Element  (0) 2022.03.07
'React' Related Articles more
Comments