react 썸네일형 리스트형 1/7[TIL]React Hooks Hooks? 기존 클래스 컴포넌트를 사용하면서 생긴 단점들을 해결하기 위해 나온 것이 Hooks라고 전반적으로 이해해도 될 것 같다. Hooks는 클래스 컴포넌트가 아닌 함수 컴포넌트에서 내가 필요한 로직만 가져와서 사용 할 수 있다. 기존 클래스 컴포넌트를 사용하면 불편했었던 this.binding 이슈 라던지 이벤트 핸들러 사용 측면... 여러가지 데이터들을 사용하여 라이프사이클을 쓰게 되면 어느 시점에 라이프사이클을 사용할지 복잡했던 문제들... 한 가지 정보를 표현하기 위해 여러가지 Wrapper들이 생기고 이는 퍼포먼스가 떨어지게 되는 결과를 가져오게 되는 점... 위에 언급했던 측면들을 해결 해준다고 보면 될 것이다. Hooks 가 나오기 이전에 함수 컴포넌트에서 stateful 한 로직 / .. 더보기 1/6[TIL]React(3) 프론트엔드 개발에서의 Side Effect? 상태를 다룰 때에 Side Effect는 주요 고려대상이다. 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인으로 대표적으로 네트워크 요청, API 호출이 Side Effect의 예로 볼 수 있다. 우리는 컴포넌트를 만들 때 Side Effect를 최대한 배제하고 컴포넌트를 만들어야 한다. 쉽게 말해 위의 예로 들었던 네트워크 요청이나 API 호출 이 없어도 하드코딩 데이터 만으로도 작동이 가능해야 하다는 것이다. 하지만 앱을 만들다 보면 분명 API 호출도 해야 하고, side effect는 불가피하게 생기기 마련이다. 장바구니에 데이터가 서버에 있다면 네트워크 요청(fetch) 때문에 오래 걸릴 수도 있다. 데이터 로딩 여부 (isLoading) 라는 .. 더보기 1/5[TIL]React(2) React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 페이지를 만들기 이전에 컴포넌트를 만들고 조립한다. 즉, 상향식(bottom-up)으로 앱을 만드는 것이다. 이렇게 하면 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 그래서 여러분이 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. 단일 책임 원칙에 따른 구분에 따라 하나의 컴포넌트는 한 가지 일만 한다. 그렇기에 보통 트리 구조로 나타낼 수 있으며 데이터를 어디에 둘 지를 결정해야 한다. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attribut.. 더보기 1/4[TIL]React(1) 프론트 엔드의 꽃이라고도 불리는 React React 에 대해 알아보기로 하자 먼저 엘리먼트는 React 앱의 가장 작은 단위로 화면에 표시할 내용을 기술한다. DOM에 엘리먼트 렌더링 하기 위해서는 HTML 파일 어딘가에 가 있다고 가정해 보면 로 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다. React 엘리먼트를 루트 DOM 노드에 렌더링 하려면 둘 다 ReactDOM.render()로 전달하면 된다. React에서는 JSX라는 문법을 사용하게.. 더보기 이전 1 다음
