React 공식 문서 다시 읽기 (1. Main concepts)

Main Concepts

처음 React를 시작할 때 거의 이해 못하고 practice 정도만 참조했을 듯 싶어서 다시 읽어보았다. 개념을 이번에 명확히 했다거나 처음 들어본 것들을 정리해보았는데, Main concept에서도 꽤나 많았다. 이번 기회로 해당 정리 글을 주기적으로 보도록 해야겠다 😊

 

Introducing JSX

React는 기존에 html, js 와 같이 기능 별로 문서를 나누던 데에서 한 컴포넌트 단위로 나누게 함으로써 js, html(jsx), css를 컴포넌트 단위로 다룰 수 있게 하였다.

JSX의 내부의 변수들은 렌더 시점에 이미 문자열로 변경 되므로 XSS 공격을 피할 수 있다.

 

Rendering Elements

React로 만들어진 어플리케이션은 하나의 root DOM 노드를 가진다. 그리고 이 DOM 노드에 React element들이 다음과 같은 코드를 통해 render된다.

ReactDOM.render(element, document.getElementById('root'));

React 요소들은 불변적 요소들이다. 따라서 UI를 변경하기 위해서는 새로운 요소를 만들어야 한다.

 

Components and Props

컴포넌트는 props라는 매개변수를 받아 React 요소를 반환하는 JS 함수이다.

React 상에서 소문자로 시작하는 tag들은 모두 DOM tag를 의미하기 때문에, 컴포넌트는 대문자로 시작해야 한다.
순수 함수(pure function)란 input을 변화시키지 않고 input에 대해 항상 똑같은 결과를 반환하는 함수이다.

그리고 React의 컴포넌트들은 모두 순수 함수여서 props를 변화시키지 않는다.

 

State and LifeCycle

React는 생명주기를 가지는데 특정 React Element가 DOM에 처음으로 렌더되는 것을 mounting이라고 하고, 해당 Element가 DOM에서 지워지는 것을 unmounting이라고 한다. mounting, unmounting 시 사용자는 특정 동작을 수행하기 위해서 lifecycle method를 사용할 수 있다.

• componentDidMount : mount 시 동작
• componentWillUnmount : unmoount 시 동작

 

💡 state에 대해 알아둬야 할 것

• state를 직접 수정할 수 있는 것은 constructor에서 뿐이다.
• state는 동기적으로 갱신된다.
  • 따라서 이전 state나 props를 받고 싶다면 setState에 함수를 사용하면 된다. this.setState((state, props) => ());
• object state의 경우 특정 속성만 업데이트해도 자동으로 merge해준다.

 

Handling Events

이벤트를 다루는 데에 있어서 React가 DOM에서와 다른 점은

• camelCase를 쓴다.
• string이 아닌 function을 넘긴다.
• event를 막으려면 return false;하는 것이 아니라 event.preventDefault();를 수행하면 된다.

이벤트 핸들러를 이벤트 속성에서 직접 정의하는 방식은 괜찮지만, 만약 해당 핸들러 함수가 props로 하위 컴포넌트에 전달된다면 하위 컴포넌트 또한 계속해서 re-rendering 되므로 주의해야 한다.

const Parent = () => {
    const handleClick = () => {};
    return (
        <Child onClick={() => handleClick()} />
            // () => handleClick(); 이 렌더링 시마다 변겨되므로 하위 컴포넌트까지 재렌더링
    );
}

 

Lists and Keys

React element의 list를 rendering 할 때는 각 item이 바뀌는 것을 쉽게 파악하기 위해 string type의 key 속성이 필요하다. key는 globally unique할 필요는 없지만, sibiling들 사이에서(같은 level에서)는 unique해야 한다.

• key에 index를 사용했을 때 성능저하 (Index as a key is an anti-pattern)

Index as a key is an anti-pattern

 

Composition vs Inheritance

class가 아니면 상속이라는 장점을 사용하지 못한다. 하지만 children을 props로 넘겨주는 composition의 방법으로 이를 극복할 수 있다.

 

Thinking in react

React로 무언가를 구현하고자 할 때

• 우선 컴포넌트 단위로 UI를 나누자.
• 컴포넌트의 단위가 애매하다면 단일 책임 원칙을 떠올려보자. 컴포넌트는 하나의 책임을 두고 하나의 일만 한다.
• 정적인 페이지를 먼저 만들자.
• state를 사용하지 말고 정적인 페이지를 먼저 만들어보자.
• 최소한의 State를 정의하자.
• State의 위치를 정하자.
• 반대로 흐르는 data flow를 넣자.