React.js에서는 어떤 유형의 코드로 작성할까?
선언형(Declarative) JavaScript 코드
React.js를 사용할 때는 목표, 즉 화면에 무엇이 표시되어야 하는지를 정의하고 React가 거기까지 도달하는 방법을 알아내도록 만들어야 한다.
“JSX”란?
React 프로젝트에서만 활성화되는 특수한 비표준 구문이다.
“create-react-app”으로 생성한 React 프로젝트와 같이 React 프로젝트는 JSX 구문을 지원한다. 백그라운드에서 표준 JS 코드로 컴파일된다.
왜 “컴포넌트”를 React의 모든 것이라고 할까?
모든 UI는 결국 여러 빌딩 블록(컴포넌트)로 구성되며, 따라서 사용자 인터페이스를 "컴포넌트의 조합"이라고 생각할 수 있다.
“컴포넌트”는 사용자 인터페이스에 관한 사고 방식일 뿐이다. React는 이러한 개념을 아우르며 컴포넌트를 구축할 수 있는 도구를 제공한다.
“선언형”이란?
원하는 결과(대상 UI 등)를 정의하고 라이브러리(React)가 단계를 구성한다.
대상의 “상태(UI)”를 정의하면 해당 결과를 얻기 위해 어떤 JS 명령어를 실행해야 하는지를 React가 특정한다.
“React 컴포넌트”란?
일반적으로 표시되어야 하는 HTML(JSX)코드를 반환하는 JavaScript 함수이다.
컴포넌트란 일반적으로 해당 컴포넌트가 사용될 때 화면에 표시되는 HTML(정확히는 JSX) 코드를 반환하는 JS 함수를 말한다.
React 앱은 커스텀 React 컴포넌트를 몇 개 가져야 할까?
사용자 마음대로
원하거나 필요한 만큼 React 컴포넌트를 가질 수 있다.
O/X
React를 사용해서 DOM 노드에 마운트되는 하나의 루트 컴포넌트를 가진 컴포넌트 트리를 구축한다. (O)
하나의 루트 노드를 가지는 컴포넌트 트리 하나를 구축한다.
React를 사용하면 모든 컴포넌트를 항상 고유 DOM 노드에 마운트한다. (X)
그렇게 할 수는 있지만 항상 그렇지는 않다. 일반적으로 루트 컴포넌트가 있다면 그 아래에 여러 컴포넌트 트리를 가진다.
“컴포넌트 트리”란?
루트 노드 아래에 여러 컴포넌트가 중첩되어 있는 것을 뜻한다.
표준 HTML 문서를 구축할 때 HTML 트리를 구축하는 것처럼 컴포넌트를 서로 중첩해 트리를 구축한다.
어떻게 컴포넌트 간에 데이터를 전달할까?
“프로퍼티”라고 잘 알려진 “커스텀 HTML 속성”을 통해
고유한 “HTML 요소”를 구축하므로 고유한 속성(React에서는 “프로퍼티”라고 함)을 정의할 수 있다.
React 컴포넌트 내부의 동적 데이터(반환된 JSX 코드)는 어떻게 출력할까?
아무 JS 표현식을 단일 중괄호({}, 여닫음)로 감싸 사용한다.
중괄호 사이에 블록 문(예: if 문)을 넣을 수는 없지만, 이 특수 기능을 사용하면 모든 JS 표현식의 결과를 출력할 수 있다.
Always have hope🍀 & constant passion🔥