시작하세요! 리액트 프로그래밍

1

JSX를 제외한 부분의 설명은 ‘아주’ 훌륭하지만, JSX 부분에 가면 뭔가 아쉬움이 느껴진다.

2

책은 나름대로 자세하게 소개하고 있지만 현재 우리가 사용하고 있는 React 환경과는 ‘매우’ 다르다. 따라서 예제를 잘 돌려보는게 생각만큼 쉽지 않다. 반면에 예제가 매우 구조적으로 잘 되어 있는 것 같지만, 잘 작동하지 않기 때문에 아쉬움이 있다. React를 어느 정도 해 봤던 사용자의 경우 예제를 참고해서 새롭게 작성해보는 방법을 권한다

3

FLUX 구현체를 Redux를 사용하고 있지 않다는 점은 큰 아픔이 아닌가 싶다.

  1. h1()에 대한 첫 번째 매개변수(이 경우 null)는 컴포넌트로 전달하려는 프로퍼티(DOM 속성에 해당)를 지정하는 객체다. […] 두 번째 매개변수(이 경우 “Hello World”)는 컴포넌트의 자식을 정의한다. […] (DOM 용어로는 텍스트 노드)

  2. 또한 CSS 프로퍼티를 다룰 때는 자바스크립트 API 이름을 사용해야 한다. 즉, font-family 가 아닌 fontFamily를 사용해야 한다.

  3. 여기서 볼 수 있듯이 필수 요건은 render() 메서드를 구현하는 것이다.

  4. 모든 프로퍼티는 다음 예제와 같이 this.props 객체를 통해 이용할 수 있다. [..] this.props는 읽기 전용이라 생각하자. 프로퍼티는 부모 컴포넌트에서 자식으로 구성을 전달하는 데 유용하다. [..] this.props의 프로퍼티를 설정하고 싶을 때는 컴포넌트의 사양 객체에 있는 추가 변수나 프로퍼티를 이용하는 것이 좋다. 예를 들어, this. props.thing이 아닌 this.thing을 이용하는 것이 좋다.

  5. propTypes; 컴포넌트가 받을 프로퍼티를 사전에 선언할 수 있다. 따라서 컴포넌트를 사용할 다른 개발자가 컴포넌트를 구성하는 데 사용할 수 있는 프로퍼티를 알아보기 위해 render() 함수의 소스코드를 직접 살펴볼 필요가 없다. […] getDefaultProps() 메서드를 구현하면 이러한 유형의 코드를 작성할 필요 없이 중요한 일에 집중할 수 있다. […] 여기서 볼 수 있듯이 getDefaultProps()는 각 선택적 프로퍼티(.isRequired가 없는 프로퍼티)에 유요한 값을 제공하는 객체를 반환

  6. setState()를 호출한 이후 UI 업데이트는 변경 사항을 효율적으로 처리하는 대기열 메커니즘을 통해 처리되며, this.state를 직접 업데이트하면 예기치 않은 결과를 발생할 수 있다. this.props와 마찬가지로 this.state 객체 역시 읽기 전용으로 취급하는 것이 좋다. […] this.props를 통해 프로퍼티에 접근할 수 있는 것과 비슷하게 this.state 객체를 통해 상태에 접근할 수 있다. 상태를 업데이트하려면 this.setState()를 사용한다. this.setState()가 호출되면 리액트는 여러분의 render() 메서드를 호출하고 UI를 업데이트 한다.

  7. 다음 단게는 이 상태 비저장 컴포넌트를 상태 저장 컴포넌트로 바꾸는 것이다. 다른 말로 하면, 컴포넌트가 자체 데이터(상태)를 유지 관리하게 해서 나중에 데이터가 변경되고 자신(렌더링)을 업데이트할 때 이 데이터를 이용해 렌더링하게 해보자.

  8. 상태를 업데이트 할 때는 항상 this.setState()를 사용한다.

  9. 리액트는 브라우저 이벤트를 래핑하고 정규화하는 합성 이벤트(synthetic event)를 사용하므로 브라우저 불일치 문제가 자연스럽게 해결된다. […] 리액트 이벤트 핸들러에 캐멀 표기법(camel case)을 이용하므로 onclick이 아닌 onClick을 이용해야 한다.

  10. 프로퍼티는 바깥 환경(컴포넌트의 사용자)에서 컴포넌트를 구성하기 위한 메커니즘이다. 상태는 컴포넌트의 내부 데이터다. 객체지향 프로그래밍과 비교하면 this.props는 클래스 생성자로 전달되며 인수와 비슷하며 this.state는 전용 프로퍼티와 비슷하다.

  11. 외부 프로퍼티 변경을 매끄럽게 처리하려면 프로퍼티 변경에 대비하는 componentWillReceiveProps() 메서드를 구현하면 된다.

  12. component{Will, Did}Update(), component{Will, Did}Mount(), component{Will}Unmount(), shouldComponentUpdate(newProps, newState)

  13. 트랜스파일은 의미는 동일하지만 이전 브라우저가 이해할 수 있는 구문으로 소스코드를 변환하는 과정이다. 폴리필(기능 지원)을 이용하는 것과는 다르다.

  14. 그런데 이렇게 하면 컴포넌트가 “순서성”을 잃는다. 순수 렌더 컴포넌트는 props와 state만 이용해 렌더링한다는 것을 기억하자.

Written on December 15, 2016