20240122 TIL #21

1. TIL

 (1) JSX 문법

    JSX 문법은 JavaScript와 XML의 합성어로, JavaScript를 확장하여 JavaScript와 HTML의 요소를 모두 사용할 수 있는 문법이다.

   React에서는 JSX 문법으로 component를 만들어 component 단위로 화면에 rendering한다.

 

 (2) State

    useState 훅으로 state를 만들어 입력값, 제목 등의 상태를 관리했다.

 

 (3) children

    props, children을 이용해 서로 다른 component 사이에서 state 값들을 공유했다.

 

 (4) 불변성 유지가 필요한 부분

   todoList의 초기값을 빈 배열로 설정하고, 새로운 값을 입력했을 때 useSate로 그 state를 바꿔줘야 react가 인식해서 re-redering을   해서 화면에 반영이 된다.

  그래서 spread 연산자, map, filter로 기존 배열을 복사하여 불변성을 지켜주고, 그 후에 수정해서 새로운 주소값에 할당해야 변화가 인식 되어 todoList를 추가, 수정 및 삭제하는 것이 가능했다.

 

 (5) 재사용할 수 있는 컴포넌트를 분리했을 때의 장점

   props, props children을 이용하여 App component 외에 Layout, Header, Inputbox, Button, Cards 등으로 컴포넌트를 분리했다.

  이렇게 했을 때, 컴포넌트들을 각 파일에 분리하여 따로 관리할 수 있다. 전체를 수정하지 않고도 단일 컴포넌트 단위로 수정이 가능하고 코드의 가독성이 좋아진다. 이후에 유지, 보수가 용이하며 효율적인 협업이 가능해진다.