Library/React

✅ React Hooks란? 1. 리액트 훅(Hook) 1) 클래스형 컴포넌트(📌참고)에서 이용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있다. 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.(클래스형 컴포넌트의 문제를 해결하기 위해 나온 것이 훅) 2) 함수형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render()를 제외한 나머지 method 및 state는 그대로 보존되어 있다. 📌 클래스형 컴포넌트의 단점 클래스형 컴포넌트에서 로직 재사용시에 사용한느 고차컴포넌트, 렌더 속성 값 패턴은 리액트 요소 트리를 깊게 만든다. (너무어렵다) 따라서, 성능에 부정적인 영향과 개발 시 디버깅이 ..

✅ 리액트란 리액트는 사용자 인터페이스(User Interface)를 만들기 위한 자바스크립트 라이브러리이다. 페이스북에서 처음 개발하고 2013년 오픈 소스 라이브러리로 바뀌어 현재 많은 개발자들이 사용하고 있다. 👉 현재 페이스북, 넷플릭스, 에어비앤비 등 유명한 플랫폼이나 서비스등에서 리액트를 사용하고 있고, 프론트엔드 라이브러리이다. ✅ 리액트 특징 단방향 데이터 흐름: 리액트는 데이터가 단방향으로 흐르기 때문에 데이터 흐름을 추적하기 쉽다. 규모가 커질 수록 데이터의 흐름을 추적하기 힘든데 단방향 데이터 흐름을 통해 파악하기 쉬워진다. 컴포넌트(Component) 기반: 리액트는 독립적인 단위의 소프트웨어 모듈인 컴포넌트(Component)를 기반으로 페이지를 구성한다. 리애그의 컴포넌트는 자바..

✅ Component란? 컴포넌트(Component)는 데이터를 입력 받아 DOM NODE를 출력하는 함수이다. 입력받는 데이터에는 Props나 State 등이 있다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 다룰 수 있다. 따라서, 리액트를 통해 만든 웹이나 앱은 컴퍼넌트를 유기적으로 연결해서 SPA(Single Page Application)으로 만들 수 있다. 이처럼 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 개발 시관과 유지 보수 비용을 줄일 수 있다.