[React] 주요 개념1

슬지로운 개발생활·2023년 1월 11일
React
0

React

목록 보기
1/1

1. Hello World

React 주요 개념에 대한 단계별 안내서의 첫번째 장입니다.
주요 개념안내서들을 읽으면 React의 거의 모든 내용을 익힐 수 있습니다.

**
리액트 공부를 위해 처음부터 다시 공부합니다.
리액트 공식문서

2. JSX 소개

자바스크립트를 확장한 문법으로 React 엘리먼트(Element)를 생성한다.

JSX란?

React의 렌더링 로직이 UI로직과 연결된다.

UI로직: 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등

마크업과 로직을 포함시키는 컴포넌트라고 부르는 느슨하게 결합된 유닛으로 관심사를 분리합니다.

In computer science, separation of concerns is a design principle for separating a computer program into distinct sections.

JSX 사용이 필수는 아니나 JS안에서 UI 관련 작업할 떄 도움이 된다.

JSX에 표현식 포함하기

JSX 중괄호{} 안에는 JavaScript 표현식을 넣을 수 있다.
JSX를 여러 줄로 나눌때,
자동 세미콜론 삽입을 피하길 원하면 괄호로 묶는 것을 권장한다.

JSX도 표현식입니다

컴파일이 끝나면 JSX가 JavaScript 함수 호출이 되고,
JavaScript 객체로 인식된다.
→ if / for 내부 사용, 변수 할당, 함수 인자 및 리턴 값으로 쓰일 수 있다.

JSX 속성 정의

attribute에 따옴표를 이용해 String을 정의하거나,
중괄호를 사용해 표현식을 삽입할 수도 있다.

💡
한가지 attribute에 따옴표, 중괄호 두가지를 동시에 사용하지 말 것!

☠️
JSX는 HTML보다 JS에 가깝기 때문에, ReactDOM은 camelCase 프로퍼티 명명 규칙을 사용한다.
→ class가 className이 되고, tabindex는 tabIndex가 된다.

JSX로 자식 정의

종료태그가 없는 빈 요소는 />를 사용해 닫아야 한다.
또한 JSX태그는 자식을 포함할 수 있다.

JSX는 주입 공격을 방지합니다

React DOM은 JSX에 삽입된 모든 값을 렌더링 전 이스케이프한다. 따라서 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않고, 모든 항목은 렌더링 전 문자열로 변환되는 특성으로 XSS(cross-site-scripting) 공격을 방지한다.

참조: HTML 엔티티(entity)

JSX는 객체를 표현합니다

Babel은 JSX를 React.createElement() 호출로 컴파일한다.
React.createElement()는 버그가 없게 몇가지 검사를 수행하며, 다음과 같은 객체를 생성한다.

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를 'React 엘리먼트'라고 한다.
React는 이 객체를 읽어 DOM을 구성하고 최신 상태로 유지하는 데 사용된다.

3. 엘리먼트 렌더링

엘리먼트는 React앱의 가장 작은 단위이고, 화면에 표시할 내용을 기술(설명)한다.
DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체 이다.

엘리먼트는 컴포넌트의 '구성 요소'이다.

DOM에 엘리먼트 렌더링하기

  1. DOM 엘리먼트를 ReactDOM.createRoot()에 전달한다.
  2. React element를 root.render()에 전달한다.

렌더링 된 엘리먼트 업데이트하기

React element는 불변객체(immutable object)이다.
생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
UI 업데이트를 위해선 새로운 엘리먼트를 생성해서 root.render()로 전달한다.

변경된 부분만 업데이트하기

reactDOM 해당 엘리먼트를 이전의 엘리먼트와 비교해 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.
→ 변경되는 노드만 업데이트 한다.'

4. Components와 Props

개념적으로 컴포넌트는 JS함수와 유사하다.
임의의 값(props)을 받아 화면에 어떻게 표시되는지 기술하는 React element를 반환한다.

함수 컴포넌트와 클래스 컴포넌트

  • 함수 컴포넌트: props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환한다. JS 함수이기에 말그대로 함수 컴포넌트라고 호칭한다.
  • 클래스 컴포넌트: ES6 class를 사용해 컴포넌트를 정의한다.

리액트 관점에서 두 유형의 컴포넌트는 동일하다.
함수, 클래스 컴포넌트 둘다 몇가지 추가기능이 있다.

컴포넌트 렌더링

리액트 엘리먼트는 사용자 정의 컴포넌트로 나타낼 수 있다.
리액트가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX attribute와 자식을 해당 컴포넌트에 단일 객체(props)로 전달한다.

💡 컴포넌트의 이름은 항상 대문자로 시작한다.

컴포넌트 합성

컴포넌트는 자신의 아웃품에 다른 컴포넌트를 참조할 수 있다.
기존 앱에서 리액트를 통합하는 경우에 Button같은 작은 컴포넌트부터 시작해 뷰 계층의 상단으로 올라가면서 작업해야 할 수 있다.

컴포넌트 추출

컴포넌트에서 개별적으로 재사용할 수 있게 작은 컴포넌트로 만든다.
컴포넌트 props 이름은 사용될 context가 아닌 컴포넌트 자체 관점에서 짓는 것을 권장한다.
UI 일부가 여러번 사용되거나 UI 일부가 자체적으로 복잡한 경우에는 별도의 컴포넌트로 만드는 것이 좋다.

props는 읽기 전용입니다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체 props를 수정해서는 안된다.
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

profile
슬지로운 개발생활
:)

0개의 댓글