Basic_Studies/React & Next.js

[REACT] 공식문서 요약(본인공부용)

adore_voy 2021. 12. 1. 13:47

2. JSX 소개

const element = <h1>Hello, world!</h1>;

JSX는 리액트 엘리먼트를 생성함.

리액트의 컴포넌트는 마치 레고조각처럼 유닛으로 관심사들을 분리한다. 예를 들어, header 컴포넌트는 header만 다루는 레고조각이다.

 

jsx 컴파일이 끝나면 정규 자바스크립트 함수 호출이 되고 객체로 인식된다. 

jsx는 html보다는 자바스크립트에 가깝기 때문에, 리액트 돔은 html 어트리뷰트 이름 대신에 카멜케이스 명명 규칙을 사용한다.

예를 들어 class는 class-name이 아닌 className이 된다!

태그가 비어있다면 아래와 같이 바로 닫아주어야 한다.

const element = <img src={user.avatarUrl} />;

 

기본적으로 모든 값을 렌더링 전에 ///이스케이프 시키기 때문에 악성 인풋은 주입되지 않는다. 모든 항목은 렌더링 전에 문자열로 변환돼서 XSS 공격을 방지할 수 있다.

 

3. 엘리먼트 렌더링

브라우저의 DOM과 달리 리액트 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다! 리액트 돔은 리액트 엘리먼트와 일치하도록 DOM을 업데이트 한다. 이게 버추얼 돔을 말하는 것 같다. 

 

리액트로 구현된 앱은 일반적으로 하나의 루트 노드가 있다. index.js에 있는 root라는 아이디를 가진 그 녀석 말이다. 이 안에 들어가는 모든 엘리먼트들을 리액트 돔에서 관리하기 때문에 이를 루트 돔 노드라고 부른다.

 

리액트 돔은 해당 엘리먼트와 자식 엘리먼트를 이전의 엘리먼트와 비교하고 돔을 필요한 경우에만 업데이트한다.

 

4. Component와 Props

컴포넌트는 함수와 유사한 개념. props라고 하는 입력을 받고 엘리먼트를 반환한다.

 

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

 

함수 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

클래스 컴포넌트(es6)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

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

리액트는 소문자로 시작하는 컴포넌트들을 dom 태그로 처리하기 때문이다. 

 

컴포넌트는 ui 일부가 여러번 사용 되는 버튼 등 이나 ui 일부가 자체적으로 복잡한 경우에는 별도의 컴포넌트로 만드는게 좋다.

 

그리고 모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다. props는 읽기 전용이기 때문에 함수 컴포넌트나 클래스 컴포넌트 모두 자체 props를 수정하면 안된다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환!

반응형