React 컴포넌트가 한 화면에 렌더링 되는게 많아지면 많아질수록 최종 렌더링 시간이 오래 걸리는건 팩트다. 보여주고 싶은 정보가 많을수록, 구조가 복잡할수록 렌더링할 컴포넌트는 많아진다. 더 많이 보여주고싶은 요구를 무시할수는 없으니, 더 효과적으로 렌더링 할 수 있는 방법을 찾아야한다. 그 첫번째 편으로 성능 최적화에 대한 Hooks, Api 를 알아보자! useCallback, useMemo, React.memo 위 3개 항목은 react에서 성능 최적화를 논할때 빠지지 않고 등장하는 react API 이다. useCallback 오늘 코드리뷰를 하다가 짧은 토글 코드에 useCallback 이 사용된 경우를 봤다. 사용되면 안되는 곳에 사용된 것 같은 느낌이 계속 들었는데, 동료가 관련 문서를 찾..

본문은 React Document 를 바탕으로 작성하였다. React로 사고하기 1단계 : UI를 컴포넌트 계층 구조로 나누기 어떤 것이 컴포넌트가 되어야 할지 어떻게 알 수 있을까? 새로운 함수나 객체를 만들 때 처럼 만들면 된다. 한 가지 테크닉은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적 이라는 원칙이다. 2단계 : React로 정적인 버전 만들기 컴포넌트 계층 구조가 만들어 졌으니 앱을 실제로 구현해 볼 시간이다. 가장 쉬운 방법은 데이터 모델을 가지고 UI만 렌더링 하고 아무런 동작도 없는 버전을 만들어 보는 것 이다. 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 동작들이 수행되는 상호작용을 만드는 것은 생각은 많이 필요하지만 타이핑..

본문 내용은 React Document 를 바탕으로 작성 되었다. 리스트와 Key function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );위와 같이 number list 를 표현 할 수 있다. 다만, 주의 해야 할 점은 위의 를 나타내는 부분에서 ... {number} ...위 와 같이 key값이 없이 작성을 하게 되면 각 항목에 key 를 넣어야..

아래 글은 React Document 를 바탕으로 작성되었다. 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 애플리케이션의 상태에 따라 컴포넌트 중 몇 개 만을 렌더링 할 수 있다. React에서 조건부 렌더링은 javaScript에서의 조건 처리와 같이 동작한다. if나 조건부 연산자(삼항 연산자) 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는데 사용해라. 그러면 React는 현재 상태에 맞게 UI를 업데이트 할 것이다. 요약 : if나 삼항 연산자를 사용해 조건부 렌더링이 가능하다 이 컴포넌트는 현재 상태에 맞게 이나 을 렌더링 한다. class LoginControl extends React.Component { cons..

아래 글은 React Document 를 바탕으로 만들어 졌다. 이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 문법 차이는 아래와 같다. React의 이벤트는 소문자 대신 camelCase 를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. // normal DOM Activate Lasers // React Activate Lasers React 에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야 한다. // HTML Click me // React function ActionLink() { function handleClick(e) ..

아래 내용은 React Document 를 바탕으로 작성되었습니다. Component와 Props 컴포넌트를 사용해 UI를 재사용이 가능한 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 function Welcome(props){ return Hello, {props.name} } 이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트를 함수 컴포넌트 라고 한다. 또한 ES6 class를 사용하여 컴포..