211004 TIL

TIL DAY 66

오늘 배운 일

✔️ 코드잇에서 React 프론트엔드 개발

• 인덱스 파일에서 하는 일

  React는 html파일을 만져서 코드를 작성할 필요가 없다.
  js파일로 설정이 가능하다.

  

  react-dom을 불러서 render 메소드를 이용한다.
  render는 코드를 작성시키는 역할을 한다.

  render 안에 첫번째 아규먼트는 element이며 두번째는 그 element를 담을 container element를 가져와 첫번째 태그를 감싼다.

• JSX

  • 자바스크립트 파일안에 html 태그문법

  • react에서 지원한다.

  • 모든 html문법을 지원하는게 아니라 class나 for는 조금 다르게 표현한다.

    

    보통은 class라고 할텐데, class 함수가 존재해서 className이라고 한다.

    

    그리고 for속성은 htmlFor라고 작성해야 동작을 한다.

• 프래그먼트 (Fragments)

  • Fragments는 DOM에서 별도의 노드를 추가하지 않고도 여러 자식을 그룹화할 수 있게 도와준다.

  • 불필요한 div태그를 줄이는 방법

    예 )

    바뀌기 전...
    

    바뀌고 나서...

    

    결과값 :

    • div를 사용하지 않아도 되서 편리한 방법이다.

    

    그리고 매번 긴 이름을 반복해서 사용하지 않아도 된다.

    그 방법은.....

    

    기존에 있던 Fragment를 지우고, 빈 태그를 쓰면 된다.

느낀점 :

• 오늘은 리액트 파일의 구조와 JSX 그리고 fragment에 대해 배우는 시간을 가졌다.
• Fragment는 자주 사용한다고 하니 꼭 외워야겠다.