React

Editor's Notes

• #3: 목차는 다음과 같습니다.
• #5: 2013년 6월 ReactJS(JS를 빼고 React라고 부르기도 한다)는 JSX라는 자바스크립트의 확장 문법을 통해 XHP와 유사한 기능을 제공하고 있습니다.
• #6: - 단방향데이터흐름 이해하기 쉽다(데이터의 흐름이 일방 통행이라 이해하기가 쉽다. 상위 컴포넌트 -> 하위 컴포넌트) 하위 컴포넌트의 변화는 이벤트를 통해 감지한다.(상위 컴포넌트는 하위 컴포넌트에 이벤트를 추가해 이벤트 감지)
• #8: React는 UI구현에 특화된 Framework입니다.
• #10: 솔직히 코드는 많이 길어졌지만 훨씬 알아보기 쉬워졌습니다.
• #12: - ReactElement ReactElement객체는 React.createElement를 통해 만들 수 있습니다. var root = React.createElement('div'); DOM에 새로운 트리를 렌더링하기 위해서는 ReactElement를 만들고 DOM Element (HTMLElement 또는 SVGElement)와 함께 React.render에 넘깁니다. ReactElement를 DOM Element와 혼동해서는 안됩니다. ReactElement는 DOM Element의 가상 표현입니다. 즉 가상 DOM입니다. React.render(root, document.getElementById('example')); DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로퍼티 객체를, 세번째 인자로 자식을 넘깁니다. var child = React.createElement('li', null, 'Text Content'); var root = React.createElement('ul', { className: 'my-list' }, child); React.render(root, document.getElementById('example')); - ReactNode ReactNode는 다음 중 하나가 될 수 있습니다 이들은 자식을 표현하기 위해 다른 ReactElement의 프로퍼티에 사용됩니다. 사실상 이들이 ReactElement의 트리를 형성합니다. - ReactComponent ReactElement만 가지고도 React를 사용할 수는 있지만, React의 장점을 제대로 활용하려면 ReactComponent를 사용하여 상태를 가진 캡슐화된 객체를 만들기를 원할 것입니다. ReactComponent 클래스는 그냥 JavaScript 클래스 (또는 "생성자 함수")입니다. var MyComponent = React.createClass({ render: function() { ... } }); 이 생성자가 호출될 때 최소한 render 메소드를 가진 객체를 리턴해야 합니다. 이 리턴된 객체를 ReactComponent라고 부릅니다. var component = new MyComponent(props); // 절대 하지 마세요 테스트 목적이 아니라면 절대 이 생성자를 직접 호출하지 마십시오. React가 알아서 호출해줍니다. 대신 ReactComponent 클래스를 createElement에 넘겨 ReactElement를 받을 수 있습니다. var element = React.createElement(MyComponent);
• #13: React의 경우는 setState가 호출되면 그 컴포넌트와 하위 컴포넌트가 다시 랜더링되는 대상이 됩니다. 이 말을 듣게 되면 매번 광범위하게 DOM이 갱신된다고 느껴지지만 React에서는 VirtualDOM이라고 하는 형태로 메모리상에 DOM의 상태를 유지하고 있고 전/후 상태를 비교하여 달라진 부분만 실제 DOM에 반영합니다. CSS도 마찬가지로 객체 형식으로 지정해 변경된 style만 갱신합니다.
• #14: HTML은 태그가 제대로 닫히지 않아도 에러가 발생하지 않지만 JSX는 태그를 닫지 않은 경우 에러가 발생하므로 문법 문제를 쉽게 알아차릴 수 있습니다. - JSX 사용의미 JSX를 사용하면 HTML 문법과 비슷한 느낌으로 작성할 수 있어 비엔지니어도 이해하기 쉽다는 장점이 있습니다. 개인적인 성향 차이가 있다고는 하지만 개인적으로 React.DOM.div(null, ‘hello’) 보다 <div>hello</div>와 같은 방식이 더 좋다고 생각합니다. 또, 버전 0.12는 버전 0.11에 비해 React.createClass의 동작 방식(인터페이스)이 바뀌었지만(이것에 관한 내용은 다음 절에서 소개하겠습니다.) JSX를 사용하고 있는 경우엔 코드를 그대로 사용 가능합니다. 즉, JSX에 대한 지원이 조금 더 좋습니다. JSX를 사용했을 때의 이 점은 이 정도로 생각하고 있으므로 자바스크립트로 작성하고 싶은 사람은 굳이 JSX를 사용하지 않아도 괜찮을 것 같습니다. JSX 이외로 커피스크립트 환경을 고려해 만들어진 react-kup도 있습니다. - JSX를 사용하지 않을 경우 return React.DOM.div({className: 'container', 'Hello ' + this.props.name); React.render(React.createFactory(Hello)({name: 'React'}), document.getElementById("app"));
• #16: - createClass React.createClass()는 컴포넌트를 작성할 때 사용하는 함수입니다.
• #17: - setState 유저의 액션이나 Ajax 요청 등으로 값이 동적으로 변화하는 경우는 State를 사용합니다. 특정 this.state.xxx을 갱신할 때는 this.state를 사용해 갱신하는 것이 아니라 반드시 this.setState를 사용해 갱신합니다. 절대로 this.state를 직접 변경하지 않는 것이 좋습니다. 그 뒤에 setState()를 호출하면 그동안 변경했던 것이 교체될 수 있습니다. this.state는 변경 불가능한 것으로 생각하시는 것이 좋습니다. setState()를 호출해도 this.state가 곧바로 변경되지 않고 대기 중인 state transition이 만들어집니다. 이 메소드를 호출한 직후 this.state에 접근하면 바뀌기 전의 값을 리턴할 가능성이 있습니다. setState에 대한 호출이 동기적으로 처리된다는 보장이 없으며, 성능 향상을 위해 배치 처리될 수 있습니다. setState()는 shouldComponentUpdate()에 조건부 렌더링 로직이 구현되어 있지 않다면 항상 재렌더링을 발생시킵니다. 변경 가능한 객체를 사용하고 있고 조건부 렌더링 로직을 shouldComponentUpdate()에 구현할 수 없는 경우라면 새로운 state가 이전 state와 달라지는 경우에만 setState()를 호출하여 불필요한 재렌더링을 피할 수 있습니다.
• #18: - I/F(인터페이스)로써의 Prop Prop은 외부에서 전달한 값이지 그 컴포넌트가 자체적으로 관리하는 값이 아니므로 내부에서 변경하면 안 됩니다.. 즉, Prop은 불변하며 외부와 I/F로써 작용합니다. 컴포넌트가 관리할 필요가 있는 값은 State로 정의해야 합니다. State는 Prop다음에 설명드리겠습니다.
• #20: setProps()은 기존의 Prop과 새로운 Prop을 합칩니다.(merge) 그리고 각각 두 번째 인수에 콜백 함수를 지정할 수 있습니다.
• #21: getInitialState()을 이용해 state의 초기값을 반환하고 데이터 변경이 있는 경우 this.setState()로 갱신합니다. 상태가 갱신되면 컴포넌트가 rerender 되어 UI가 갱신됩니다. 이때, 자식 컴포넌트도 함께 rerender 됩니다. setState()의 두 번째에 인수에는 setProps() 처럼 콜백 함수를 지정할 수 있습니다. state의 값을 프로퍼티로 접근해 직접 변경하면 안 되고 반드시 setState()를 사용해 갱신해야 합니다. 이는 setState()가 호출되어야 rerender 되기 때문입니다. this.state 값 자체도 Immutable 하다라고 생각하는 것이 좋습니다. 만약, this.state.list라는 배열이 있고 list에 요소를 추가하고 싶은 경우도 push()하고 setState()하는 것이 아니라 this.setState({list: this.state.list.concat([value]})로 새로운 값(배열)을 지정하는 것이 좋습니다. 이 방법이 shouldComponentUpdate()로 성능 최적화 할 때와 undo의 구현 시에 좀 더 유용합니다. - State는 최소화 Prop만 가지고 있는 Immutable한 컴포넌트가 조작하거나 이해하기 쉬우므로, 기본적으로는 Prop을 고려하고, State를 가진 컴포넌트는 최소화 하는 게 좋습니다. 최상위 컴포넌트만 State를 갖게 하고, 하위 컴포넌트는 전부 Prop만을 가지는 Immutable한 컴포넌트로 구성하여 어떤 변경이 있을 때 최상위 컴포넌트에서 setState()하여 rerender 하는 설계도 가능합니다.
• #22: State의 초기값을 Prop에서 전달해야 하는 경우의 예시입니다. prop과 state는 컴포넌트에서 데이터와 상태를 관리하는 데 중요한 속성입니다.
• #24: 자주 사용하는 메서드는 componenetDidMount()나 componentWillUnmount() 입니다. componentDidMount()에서 이벤트를 등록하고 componentWillUnmount()에서 이벤트를 해제하는 패턴을 많이 사용합니다. - componentWillMount() 컴포넌트가 DOM 트리에 추가되기 전 한 번만 호출됩니다. Server-side rendering 시에도 호출되므로 어느 쪽에서도 동작할 수 있는 코드를 작성해야합니다. DOM을 컨트롤 하는 브라우저에서만 동작하는 로직을 작성하면 안됩니다. Node.js 환경에서는 DOM이 없으므로 에러가 발생하게 됩니다. - componentDidMount() 컴포넌트가 DOM 트리에 추가된 상태에 호출됩니다. DOM과 관련된 초기화를 하고 싶을 때 편리하게 사용할 수 있습니다. componentWillMount()와 다른 게 Server-side rendering 시에 호출되지 않습니다. DOM을 다루는 처리 외에, Ajax 요청이나 setInterval 등의 Server-side rendering 시에는 불필요한 초기화 처리는 이 메서드를 통해 진행합니다. - shouldComponentUpdate() 이 메서드는 다른 메서드 Lifecycle 메서드와 달리 true나 false를 반환할 필요가 있습니다. 컴포넌트가 rerender 하기 전에 호출되며, 만약 false를 반환하면 VirtualDOM 비교를 하지 않고 rerender도 하지 않습니다. 즉, 독자적으로 Prop이나 State 비교 처리를 구현하는 것으로 불필요한 계산을 하지 않을 수 있습니다. 보통 성능 향상을 목적으로 사용합니다. 이 메서드가 반환하는 기본값은 true 이므로 재정의 하지 않으면 항상 rerender 합니다. 강제적으로 rerender 하고자 할땐 forceUpdate()를 사용합니다. forceUpdate()가 호출되는 경우엔 shouldComponentUpdate()는 호출되지 않습니다. - componentWillUnmount() 컴포넌트가 DOM에서 삭제될 때 호출됩니다. 이벤트 해제 같은 clean-up 처리 시 할 때 사용합니다. componentDidMount()에서 등록한 Timer의 처리나 DOM의 이벤트 등은 여기에서 해제해야 합니다.
• #28: DEWS 숫자텍스트박스를 구현해보았는데 그 때, spinnerButton을 구현한게 생각나 React를 이용하여 spinnerButton을 구현해보았습니다.