Happy coding

👉 React Hook React의 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능(state, Lifecycle)을 사용할 수 해주는 함수이다. 즉, React state와 Lifecycle 기능을 연동(hook into) 할 수 있게 해주는 함수이다. React에서 Hook을 도입하게 된 목적은 여러가지가 있지만 핵심만 정리해 보았다. 🌈 문제점 1 클래스 컴포넌트 기반의 React 코드 작성 시 컴포넌트 재사용성을 위해 Render props, Higher-Order Component와 같은 패턴을 사용해 문제를 해결하였다. 하지만 이 두 가지 패턴을 사용하기 위해 엄청난 양의 감싸는 컴포넌트들이 생겨 Wrapper Hell을 만들며, 구조적 제약 및 코드 추적을 어렵게 만든다. 🖐 잠깐 그럼..

React에는 컴포넌트를 선언하는 방식이 클래스형, 함수형 두 가지가 있습니다. 과거 React는 함수형 컴포넌트는 사용할 수 없었던 state와 Life Cycle을 사용할 수 있어 클래스형 컴포넌트를 주로 사용하였지만, React 16.8 버전 이후 'Hook' 이 도입되면서 함수형 컴포넌트도 state와 Life Cycle을 사용할 수 있게 됨과 동시에 클래스형 컴포넌트보다 더 편해진 방법으로 사용할 수 있게 되었습니다. React 공식문서에서는 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있다. 👉 클래스형 컴포넌트 1. class를 선언해야한다. 2. Component를 상속 받아야한다. 3. render() 메소드가 반드시 존재해야한다. 4. state, Life Cycle 사용 가..

React JSX 특징 중 하나로, 아래와 같은 특징이 있습니다. React 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문에 반드시 부모 요소 하나가 감싸는 형태여야 한다. 리액트 JSX 기반으로 개발된 프로젝트들을 보면 위 내용으로 인해, 아무런 의미 없이 태그를 남발하는 상황이 나타나게 된다. 이러한 경우 아래와 같은 단점들이 생기게 된다. 1. 불필요한 DOM node 생성으로 불필요한 메모리를 잡아먹는다 2. CSS Flexbox 및 Grid로 작업할 때 레이아웃이 깨질 수 있다 3. HTML 특정 구조(ul > li, table > tr > td)에 잘못된 HTML 구조가 발생할 수 있다 이러한 이유들로 우리는 React의 Fragments를 적극적으로 활용해야 합니다. 👉 F..

👉 React 클래스형 컴포넌트 생명주기 Angular, Vue, React 컴포넌트에는 프로세스가 진행되는 시점에 따라 Lifecycle 이벤트로 불리는 특별한 함수가 실행됩니다. 리엑트 생명주기에 따라 아래와 같은 시점과 같이 필요할 때 사용할 수 있다. Mounting(생성) Updating(업데이트) Unmounting(제거) 설명 페이지에 컴포넌트를 나타내는 이벤트 컴포넌트 정보를 업데이트 하는 이벤트 페이지에서 컴포넌트가 사라지는 이벤트 실행 시점 컴포넌트 클래스의 인스턴스를 DOM 노드에 추가하는 시점 속성 또는 상태가 변경되어 컴포넌트 클래스의 인스턴스를 갱신하는 시점 컴포넌트 클래스의 인스턴스를 DOM에서 제거하는 시점 실행 횟수 1회 실행 변경에 따른 여러번 실행 1회 실행 위의 내용과..

React에 대해 전체적으로 공부하면서 내 나름대로의 정의들을 정리해 보려고 한다. 배우면서도 까도까도 색다른 매력을 느낀 React에 대해서 알아보자. 👉 React 란? 리엑트는 페이스북에서 제공해 주는 JavaScript 라이브러리(프레임워크 X)이며, 작은 UI 컴포넌트 퍼즐들을 구성 및 조합하여 복잡한 UI를 구성할 수 있도록 도와줍니다. 여기서 잠깐! ✋ 라이브러리와 프레임워크의 간단한 설명 -> 프로그램을 쉽게 만들 수 있게 하는 공통 목적이 있으며, 중요 차이점으로는 코드 흐름의 제어권이 누구에게 있느냐로 볼 수 있다. 라이브러리 프레임워크 흐름 내가 만든 코드를 내가 컨트롤 할 수 있음 누군가가 만들어 놓은 규칙에 따라 만들어야함 코드 활용 가능한 특정 기능에 대한 코드(스티커처럼 붙였다..