[TIL] 2023-01-15

• 리액트 동작 원리 공부 중, 리액트를 구성하는 핵심 요소 JSX 구문에 대해서 알아봄

  • 앞서 공부한 가상 DOM 객체를 만들어주는 함수 React.createElement 호출의 복잡성 문제 발생(코드가 복잡해짐) => 자바스크립트 언어에 없는 JSX 기능을 언어 확장 형태로 추가 => 간결해진 코드 => 개발 생산성 향상
  • 겉으로 보기에는 HTML 같아보임(친숙했음)
  • JSX = JavaScript + XML (XML 구문에 자바스크립트 코드를 결합하는 용도로 만들어진 구문)
  • 리액트에서 JSX구문을 작성할 때는 XML 규약을 엄격하게 준수해야함((스스로) 닫는 태그, 중괄호, 표현식, 부모 요소 등)
  • JSX 구문 반환값은 가상 DOM 객체
  
  

• 리액트 동작 원리 공부 중, 리액트를 구성하는 핵심 요소 컴포넌트component에 대해서 알아봄

  • 리액트 제공 컴포넌트, 사용자 정의 컴포넌트

  • 카멜 표기법 (camel-case notation)

  • 리액트 제공 컴포넌트(<h1>hello world</h1>) => HTML5 태그에 해당하는 컴포넌트 이름을 일일이 import 하지 않게 하려는 의도

  • 사용자 정의 컴포넌트 => React.createElement 호출이나 JSX 문으로 생성하는 가상DOM 생성 코드를 사용자 컴포넌트 쪽으로 이동하여 코드를 간결하게 하려는 목적
    ++ 타입스크립트(자바스크립트)와 JSX 구문을 함께 사용하기 위해

  • 클래스 컴포넌트, 함수 컴포넌트

  • 속성 => 객체지향 프로그래밍의 속성 + 재랜더링을 의미하는 객체 타입 변수 (부모 컴포넌트가 자식 컴포넌트 쪽에 정보를 전달하는 목적으로 사용)

  • key, children 속성

[참고 자료]

https://www.notion.so/TIL-2023-01-15-4246b64d188e4145a331ecdbd838ef6f 구체적인 내용