[React] 주말동안 공부한 React 기본기능

 

JSX사용법

Babel을 맨날 말로만 들어보다가 하는역할의 일부를 알게되었다.

React가 JSX방식을 이해할수있도록 React.creatElement로 바꿔주는 역할을 하고있었다.

확실히 createElemnet보다는 JSX방식이 간단했는데 이를 변환해주는 것도 있다니.. 여긴 뭐 천재들의 세상인거 같다.

Babel공식문서

 

React의 역할은 state가 바뀌면 다시 리렌더링을 해준다는것

 

 

React. memo

한번 렌더링이되었는데 바뀌지도 않은것에대해 다시 렌더링하지않도록 React에게 알려주는기능

React Top-Level API – React

Props

Components와 Props – React

    function Btn({ text, fontSize=16 }) {//기본값으로 설정을 할수있다.
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }

    //props를사용하면 동일한 컴포넌트에서 수정사항들만 바꾸어서 재사용할수있다.
    //즉 약간의 차이때문에 컴포넌트를 또만들필요가 없다.
    function App() {
      return (
        <div>
          <Btn text='Save Changes' fontSize={18} />
          <Btn fontSize='asdf' />
        </div>
      );
    }

 

코드펜에서 실행해보기

https://codepen.io/gaearon/pen/KgQKPM?editors=1010 

Hello World in React

 

Props Proto types

React에게 proto 에 들어갈 타입이 무엇인지 지정해주는것

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 검사 – React

https://www.npmjs.com/package/prop-types

prop-types