컴포넌트

화살표 함수는 ()으로 감싸면 return을 안써도된다

{}은 return을 안한다는걸 전제로하기때문에 return()까지 해야한다.

컴포넌트의 함수는 무조건 대문자

const Title = () => (
  <div>
    <p>Start editing to see some magic happen :)</p>
  </div>
);

몰라도되는 예전 리액트방식

 const root = document.getElementById("root");
   const span = React.createElement( "span",
                                     {id:"im-span", style:{color:"red"}},
                                     "Hi i'm span"
                                 );
 //중간에는 span의 id와 style등  props를 넣어줌


 ReactDOM.render(span, root);
 --> span을 root의 자식요소로 넣어줄거야!

STATE

let [state,modifier] = useState(state초기값)
변수의 state, 그 state를 수정해주는 함수 modifier

const Container = () => {
  let [counter, setCounter] = React.useState(0);
  //[state,modifier]
  //modifier 함수를 이용해서 state를 바꾸면 리렌더링이 일어난다. 
  //이 container 함수가 다시한번실행되는데, return부분을 다 재생성하는게아니고 
  //새로바뀌는값만 재생성된다.
  
  const clickme = () => {
    setCounter((current) => current + 1);
    //modifier 안에 함수를 넣어주는게안전하고좋다.
    // 이 인자는 현재 state이다/
  };

  return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={clickme}>CLICK ME</button>
    </div>
  );
};