React.js 공식문서 정리 - Advanced Guides

들어가며

• 개발자에게 가장 중요한 습관은 문서를 읽는 습관이라고 생각합니다.
• 이 글은 리액트 공식 문서를 정독하며 내용을 정리하기 위해 작성하게 되었습니다.
• 모든 내용을 정리하기 보다는, 모르는 내용이나 기억하고 싶은 내용 위주로 정리합니다.
• 공식 문서의 주소는 https://reactjs.org/docs/accessibility.html입니다.

ADVANCED GUIDES

 

Accessibility

• WCAG의 기준을 만족하는 web content를 작성할 필요가 있다.
• 아무런 의미없는 -묶어주기위한- 용도로 div를 쓰지 말자. Fragment를 이용할 것. props를 넘겨줄 수 있다는 장점이 있는데 없으면 빈 엘리먼트 <>를 써도 된다.
• 원칙상으로는 input, textarea요소에 label을 제공해야한다.
• 추후 추가 작성

 

Code Splitting

• 번들링은 여러 모듈을 하나의 자바스크립트 파일로 만들어주는 작업이다.
• 코드 분할은 앱을 Lazy loading하도록 돕는다.
• import 구문을 사용하여 then으로 처리할 수 있다.
• 동적 import -> https://ko.javascript.info/modules-dynamic-imports 참고하기
• 동적 import 정리
  1. import 문의 경로에 제약이 생긴다. 문자열만 가능.
  2. 조건부 import가 불가능하다.
  3. import()를 이용하면 동적으로 모듈을 가져올 수 있다.
  4. promise 의 resolve에는 표현식이 다 들어갈 수 있다.
  5. 결과적으로 module 객체가 반환되고, export 로 했다면 module.함수 이름 등으로 접근하거나 destructing으로 받아올 수 있다. 
• React.lazy 안에 동적import를 하는 콜백을 인자로 준다.
• lazy loading을 하는 컴포넌트를 Suspense로 감싸준다. 이 때 fallback props에 대신 띄울 컴포넌트를 줄 수 있다. fallback은 backup과 synonym이다.
• blocking-nonblocking과 Syn/Async의 차이 : blocking은 함수가 바로 리턴을 해서 제어권을 돌려주느냐 아니냐고, Sync/Async는 호출한 함수가 호출되는 함수의 완료여부를 신경쓰느냐 아니냐로 구분.
• Route 안에 들어가는 컴포넌트를 lazy loading하면 좋다!

 

Context

• 전역변수 같은 개념
• React.createContext(기본값)로 선언. 기본값은 트리안에서 적절한 Provider를 찾지 못했을 때만 쓰인다.
• 선언된 컨텍스트.provider를 이용해서 컴포넌트를 만들 수 있다.
• 선언된 컨텍스트를 하위 컴포넌트에서 static변수로 받고, this.context를 쓴다(???) -> Class.contextType이라는 API가 있다. 이것으로 클래스 외부에서 context를 받아오든, 클래스 내부에서 static변수로 contextType을 선언해서 외부의 context를 받아오든 받아온 후에 연결이 된 상태로 this.context를 이용해서 쓴다. 그런데 이런 방식으로는 한개의 컨텍스트만 구독할 수 있다.
• Context.Consumer를 이용하면 value로 받아서 렌더링할 수 있다. 이는 중첩이 되기 때문에 여러 컨텍스트를 구독할 수도 있다.

<MyContext.Consumer>
  {value => /* context 값을 이용한 렌더링 */}
</MyContext.Consumer>

• 전역컨텍스트는 컴포넌트 재사용을 어렵게 만들기 때문에, 쓸 지에 대해 항상 고민해봐야한다.
• 아래 두 예시를 비교해보자.

<Page user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// 이제 이렇게 쓸 수 있습니다.
<Page user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<PageLayout userLink={...} />
// ... 그 아래에 ...
<NavigationBar userLink={...} />
// ... 그 아래에 ...
{props.userLink}

 

• 위에서는 user와 avatarSize 정보를 계속 props로 내려주는 반면, 아래에서는 Page 컴포넌트에서 미리 컴포넌트 자체를 userLink로 정의해주고 컴포넌트 통째로 내려준다. 이렇게 하면 중간에 있는 컴포넌트들은 여러개의 복잡한 데이터를 받아올 필요가 없다. 단일prop으로 처리가 가능하다.
• 컨텍스트.Provider하위 컴포넌트들은 구독자컴포넌트가 된다. 구독자 컴포넌트는 상위의 Provider로부터 현재 값을 읽는다. 
• provider 하위에 provider가 또 있으면 하위 provider가 우선시된다.
• theme을 여러 옵션을 가진 객체로 두고, default값을 그 중 하나의 key에대한 value로 정해서 createContext를 하고 export할 수 있다.
• ThemedButton 예시에서, Toolbar 안에 있는 버튼은 Provider의 value를 읽어오지만 밖에 있는 ThemedButton은 그렇지 않다. 

 

좀 더 복잡한 예시 정리

• themes 는 context가 될 수 있는 객체를 묶어놓은 객체들의 묶음이다. 
• ThemeContext는 단일 객체(키1개 value1개)로 되어있다.(themes.dark)
• ThemedButton에서는 Context를 받아와서, contextTypeAPI - this.context를 이용해 클래스 안으로 끌고 들어오고, 스타일을 주입한다.
• 하위 컴포넌트에서 context업데이트하기 부분에서, ThemeContext는 theme1개와 메소드 1개를 아이템으로 갖는 객체이다.
• ThemeContext에서 toggleTheme이라는 빈 메소드는 일종의 인터페이스 역할을 한다고 보면 되는 것 같다. App.js에서 왔을 때 state를 새로 정의하는데, theme은 themes에서 받아와서 light값을 써주고, toggleTheme은 오버라이딩을 한다. 그리고 Provider에서 오버라이딩 된 state를 넘겨준다.
• 요점은 같은 항목(아이템+아이템 개선하는 메소드)는 최대한 하나의 prop으로 묶어서 보내주는 것이 핵심이 아닌가 싶다.

 

Fragments

• props가 필요하면 React.Fragment를, 필요 없으면 <></>를 쓰자.

 

Higher Order Components

• 횡단 관심사(Cross-cutting Concerns)
  • 관심사항=기능으로 생각하자.
  • 입금, 출금, 이체 기능이 은행 프로그램에서 관심사항이라고 할때 보안처리, 예외처리, 로그 기록 등은 모두가 공통으로 들어가야 하는 로직 - 횡단 관심사항이 된다.
• CommentList는 DataSource.getComments로 state를 받아오고, 컴포넌트가 마운트/언마운트되면 리스너 추가/제거, handleChange로 state개선을 한다. 받아오는 state의 comments는 아마도 배열 형태일 것.
• BlogPost도 DataSource.getBlogPost라는 방식으로 받아오는 것 말고는 똑같은 메커니즘이다.
• withSubscription()은 래핑된 컴포넌트와 데이터를 가져오는 메소드를 인자로 받는 함수이다.
• withSubscription 의 반환값은 새로운 컴포넌트를 반환한다. 클래스의 state는 data로 초기화된다.
• 일단 CommentList에서는 원래 state를 초기화 할 때 props를 쓰지 않았지만,  추상화 과정에서 props를 매개변수로 받아주는 식으로 일반화를 한다. 
• 정리하자면 commentlist와 Blogpost는 개선방식이 동일한 과정으로 이루어지는 비슷한 컴포넌트인데, 이 둘에게 데이터를 업데이트해주는 공통로직을 함수로 작성해서 다른 두 컴포넌트를 하나의 함수로 개선한다.
• 고차컴포넌트를 만드는 함수에서 새로운 컴포넌트 반환시 this.props를 그대로 심어준다.

 

 

,



,

 

<!DOCTYPE html> <body> <script src="lib/jquery.min.js"></script> <script src="background.js"></script>