React는 class로 컴포넌트를 생성할 수 있고, function으로 컴포넌트를 생성할 수 있다. class컴포넌트와 함수 컴포넌트의 차이는 Lifecycle method를 사용할 수 있냐 없냐가 있다. React에서 함수 컴포넌트를 사용할 때 Lifecycle 메소드를 사용할 수 없었던 단점이 있었다. useEffect hook이 나오기 전까지는,,, useEffect가 나오고 나서 함수 컴포넌트에서 Lifecycle method의 기능을 비슷하게 구현할 수 있게 되었다. React의 생명주기는 크게 화면이 생성되는 Mounting, 화면이 업데이트되는 Updating, 화면이 사라지는 Unmounting가지로 나누어진다. Lifecycle Method에 대한 정리 : kmj24.tistory.co..
JSX는 React.createElement(component, props, ...children)함수에 대한 문법적 설탕을 제공할 뿐이다. Click Me 위의 코드는 아래와 같이 컴파일 된다. React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' ) JSX태그의 첫 부분은 React element의 타입을 결정한다. 대문자로 시작하는 JSX태그는 React컴포넌트를 지정한다. JSX는 React.createElement를 호출하는 코드로 컴파일 되기 때문에 React 라이브러리 역시 JSX 코드와 같은 스코프 내에 존재해야 된다. JSX타입을 위한 점 표기법 JSX 내에서도 점 표기법을 사용하여 React컴포넌트를 참조할 ..
고차컴포넌트 컴포넌트 logic을 재사용하기 위한 React의 고급 기술이다. React API가 아닌 리액트의 특성에서 나오는 패턴이다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 컴포넌트는 props를 UI로 변환하는 한편, 고차 컴포넌트는 새로운 컴포넌트로 변환한다. 고차 컴포넌트는 Redux의 connect와 Relay의 createFragmentContainer와 같은 서드 파티 React library에서 흔하게 볼 수 있다. 횡단 관심사(Cross-Cutting Concerns)에 고차 컴포넌트 사용하기 만약 외부로 부터 데이터를 subscribe하여 댓글 목록을 Rendering하는 컴포넌트가 있다고 하자. 그리고 블로그의 Post를 구독하기 위해 비슷한 패턴의 컴..
React에서 컴포넌트가 여러 element를 반환하는 것은 흔한 패턴이다 Fragment는 DOM에 별도의 Node를 추가하지 않고, 여러 자식을 그룹화할 수 있다. return ( ); 다음과 같은 컴포넌트가 있다. class Table extends React.Component { render() { return ( ); } } 위의 컴포넌트가 유효하려면 Columns 컴포넌트는 td 엘리먼트만 반환해야 된다. Columns 컴포넌트가 div로 감싸져 있다면 이는 잘못된 html이 된다. // tr태그 아래에 div태그가 있으면 안된다. Hello World 이러한 오류상황을 해결하기 위해 Fragments를 이용할 수 있다. Columns 컴포넌트를 React.Fragment로 감싸는 것이다. c..
Ref 전달은 컴포넌트를 통하여 자식 중 하나에 ref를 자동으로 전달하는 기법이다. 일반적으로 application대부분은 컴포넌트에 필요하지 않지만, 재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에는 유용할 수 있다. function FancyButton(props) { return ( {props.children} ); } 위와 같이 button을 Rendering하는 컴포넌트가 있다. FancyButton을 사용하는 다른 컴포넌트들은 일반적으로 내부 button DOM요소에 대한 ref를 얻을 필요가 없다. 하지만 이런 캡슐화는 FeedStory나 Comment와 같은 Application level의 컴포넌트에서는 바람직하지만, 재사용성이 높은 말단 요소에서는 불편할 수 있다. 이러한 ..
UI의 일부분에 존재하는 Javascript에러가 전제 application을 중단하면 안된다. 이러한 문제를 해결하기 위해 error boundary가 도입되었다. Error boundary는 하위 컴포넌트 트리의 어디서든 javascript에러를 기럭하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React컴포넌트이다. Error boundary는 Life cycle method 및 그 아래의 전체 트리에서 오류를 잡아낸다. Error boundary는 다음과 같은 오류는 잡지 않음 - Event Handler - 비동기 코드 - Server Side Rendering - Error boundary에서 발생하는 오류 Life Cycle method인 static getDerivedStateFrom..
React Application을 개발하다 보면 컴포넌트에 데이터를 전달해야 될 경우가 있다. 그러다 보면 3번째 level의 컴포넌트에서 30번째 level의 컴포넌트까지 데이터를 전달해야 될 경우도 있을것이다...? 그러면 일일이 3->4->5->6->7-> .... -> 30 까지 데이터를 전달해야된다; 이렇게 개발할 경우 유지 보수할 때 다른사람은 물론 개발한 사람도 못 알아본다. Context를 이용하면 Componente간 props로 넘겨주지 않고 전역적으로 데이터를 전송할 수 있다. 3 -> 30 바로 전달이 가능하다. 어떤 데이터를 Context를 이용하여 관리하는 것이 좋을까? Context는 Application 내 전역적으로 관리해야 할 데이터를 공유 할 수 있도록 고안된 방법이다...
[React공식문서읽기] 코드분할
번들링 대부분 React Application은 Webpack Rollup또는 Browserify와 같은 tool을 사용하여 여러 파일을 병합하여 bundling할 수 있다. (Webpack에 대하여 추후 포스팅할 계획) 코드분할 Application이 커질수록 Bundle도 커진다. 큰 규모의 서드파티 라이브러리를 추가할 경우 loading시간이 길어짐에 대한 고려가 필요하다. Bundle이 거대해지는 것을 방지 하기 위한 좋은 해결 방법은 코드분할을 통해번들을 나누는 것이다. webpack, Rollup과 Browserify(factor-bundle)과 같은 번들러가 지원하는 기능이다. 코드분할을 통해 Application을 성능향상을 도와준다. (코드 량을 줄이지 않으면서 사용자가 필요하지 않은 코..