React 강의 4일차

react에서 render함수는 UI를 바뀐부분만 업데이트함
ㄴ 자동 리렌더링?

const data = React.useState()
// [undefined, f ] -> undefined와 함수가 적힌 배열이 나타남
undefined는 data이고 f는 data를 바꿀 때 사용하는 함수

jsx 텍스트?에 변수를 넣을떄

<h3>Total clicks: {변수명}</h3> 이런식으로

컴포넌트안에 prop를 추가할때는
이벤트리스너와 같은 이름이어도 이벤트리스너가 아님

function App() {
        const [value, setValue] = React.useState("Save Changes");
        const changeValue = () => {
          setValue("Revert Changes");
        };
        return (
          <div>
            <Btn text={value} onClick={changeValue} /> 
            // 이벤트 리스너 X 하나의 prop
            <Btn text="Continue" />
          </div>
        );

prop에 넣어도 자동적으로 return안으로 들어가는 것은 아님.
직접 넣어줘야함

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

= 인자로 text와 changeValue를 받아왔지만 return문 내부에서 직접 사용해주어야함.

React.memo 
// 컴포넌트에서 리 렌더링이 필요한 상황에서만 
해주도록 설정을 할 수 있는데 이때 사용하는 함수

React의 PropTypes을 이용하면 prop의 타입과 필수로 정의되어야하는 prop들 등을 관리할 수 있다

react 사용하기 전 nodejs를 먼저 설치해야함