[React] 맛보기

React.js에서는 어떤 유형의 코드로 작성하나요?

선언형(Declarative) Javascript Code
React.js를 사용할 때는 목표, 즉 화면에 무엇이 표시되어야 하는지를 정의하고 React가 거기까지 도달하는 방법을 선언한다.

그리고 React는 하나의 루트 컴포넌트를 가진 컴포넌트 트리를 Dom Node에 마운트한다.

“컴포넌트 트리”란 무엇을 뜻하나요?

준 HTML 문서를 구축할 때 HTML 트리를 구축하는 것처럼 컴포넌트를 서로 중첩해 루트 노드 아래에 여러 컴포넌트가 중첩되는 것

“선언형”은 무슨 뜻인가요?

원하는 UI 등의 대한 결과를 정의하고 라이브러리인 '리액트'가 해당 결과를 얻기 위해 어떤 JS 명령어를 실행해야 하는지를 특정한다.

“JSX”란 무엇일까요?

React 프로젝트에서만 활성화 되는 특수한 비표준 구문으로
내부적으로 백그라운드에서 표준 JS 코드로 컴파일된다.

왜 “컴포넌트”를 React의 모든 것이라고 할까요?

모든 UI는 결국 여러 빌딩 블록(='컴포넌트')으로 구성되며, UI에 관한 개념이다.

“React 컴포넌트”란 무엇일까요?

컴포넌트가 사용될 때 화면에 표시되는 HTML(정확히는 JSX) 코드를 반환하는 JS 함수

React 컴포넌트 내부의 동적 데이터(반환된 JSX 코드)는 어떻게 출력하나요?

중괄호 사이에 블록 문(예: if 문)을 넣을 수는 없지만, 이 특수 기능을 사용하면 모든 JS 표현식의 결과를 출력할 수 있다.

React로 작업 시 이벤트를 수신하는 방법은 무엇일까요?

프로퍼티를 통해 이벤트 핸들러 함수를 설정한다.

default export const myComponent = () => {
  
const myEventHandler = event => {
  // do somethings..
}

return (
      <>
      <button onClick={myEventHandler}>
      </>
	)
}

onClick과 같은 이벤트 리스너 프로퍼티에는 어떤 값을 전달해야 하나요?

실행될 함수의 “포인터”를 onClick 등의 값으로 전달,
이벤트가 발생했을 때 “사용자를 대신하여” React가 함수를 실행

어떻게 하면 컴포넌트 중 하나에서 부모 컴포넌트, 즉 상위 수준으로 통신할 수 있나요?

JavaScript에서 함수는 단순한 객체(일반 값)이므로 프로퍼티를 통해 값을 컴포넌트에 전달하기 때문에 컴포넌트가 해당 함수를 호출하면 함수가 실행된다.
이런 식으로 부모 컴포넌트에 정의된 함수를 자식 컴포넌트 내부에서 트리거할 수 있다.

컴포넌트가 화면에 표시하는 내용은 어떻게 변경할 수 있나요?

useState 함수를 통해 "상태"값을 관리하여 JSX에서 변경 및 출력한다.

변경 및 사용에 일반 JS 변수 대신 추가적인 “상태” 개념이 필요한 이유는 무엇인가요?

React는 일부 변숫값의 변경 여부에 별 관심이 없다. 등록된 상태 값(useState를 통해 생성)이 변경되었을 때만 재평가가 이루어진다. 컴포넌트에서 상태 관리에 대한 갯수 제한은 없다.

useState?

useState는 정확히 두 요소로 이루어진 배열을 반환하며, 두 번째 요소는 언제나 상태에 새 값을 설정하기 위해 호출하는 함수다.
해당 함수를 호출하면 React가 컴포넌트를 재평가하도록 트리거한다.(useState를 다시 호출하면 새로운 인스턴스가 생성된다.)