[React] 실전 리액트 프로그래밍(1)

render 함수는 순수 함수로 작성해야 한다.

순수 함수란, 입력값이 같으면 출력값이 같은 함수를 의미한다.

언제나 동일한 값이 만들어져야 하며 이 안에 랜덤값 같은 게 들어가서는 안 된다.

 

 

state는 불변 변수로 관리해야 한다.

 

 

React.createElement에 대해 자세히 공부했다.

React.createElement(
    'div', //태그 이름
    null, //속성값
    "hello world" //자식
);

첫 번째는 만들고 싶은 태그 이름, 두 번째는 태그 속성값 이며 그 뒤에는 자식 element들이다.

태그 속성값에는 onClick 과 같은 함수도 가능하며 자식에는 중첩으로 React.createElement를 넣을 수 있다.

 

 

function LikeButton() {
  const [liked, setLiked] = React.useState(false); //React는 react.development.js가 실행될 때 전역변수로 노출.
  const text = liked ? "좋아요 취소" : "좋아요";

  return React.createElement(
    "button", //html에 해당 태그 생성 <button></button>
    { onClick: () => setLiked(!liked) }, // 태그의 속성값
    text,
  );
}

const domContainer = document.getElementById('root');  
ReactDOM.render( //3개 한꺼번에 render
  React.createElement(
    'div',
    null,
    React.createElement(LikeButton),
    React.createElement(LikeButton),
    React.createElement(LikeButton),
  ),
  domContainer,
)

3개의 버튼을 만드는 방법이다.

무작정 리액트를 만들면서 div 안에 모든 걸 감싸야 한다고만 알고 있었는데, ReactDOM.render()에서 이유를 찾을 수 있었다.

렌더링하려면 (렌더링할 객체, 렌더링 위치) 이렇게 두 개가 render함수에 사용된다.

객체는 무조건 하나여야 하기 때문에 div를 하나 만들고 그 안에 자식으로 감싼다는 것을 알게 되었다.