리액트

React Hooks

👉 React Hooks란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리 React Hook 개발 과정 1. 클래스 컴포넌트 사용 2. 함수 컴포넌트와, 리액트 훅 사용 ( 리액트 훅은, 함수 컴포넌트에서만 사용가능하다 ) 함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다. 이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부른다. React Hook의 필요성 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 ( why? ) 서로의 장점을 전부다 가지고 있다. 👉 React Hooks 사용규칙 ..

[React] Composition vs Inheritance

Composition : 뜻은 구성이나 React에서는 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미. 합성과 가까움 여러 컴포넌트들을 어떻게 조합할지. 조합법에 따라 사용 기법이 나뉜다. 1. Containment : 담다, 포함하다. 뜻으로 하위 컴포넌트를 포함하는 형태의 합성 방법. sidebar 나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. children prop을 사용한다. props의 children 은 제공해주는 것이며 배열형태이다. 여러개의 하위 컴포넌트를 가질 수 있다. 여러개의 childrn 이 필요한 경우에는 ?? 별도의 props를 정의하여 사용한다. 2. Specialization : 전문화, 특수화라는 뜻이고, Welco..

[React] React Hook

React Hook : 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 1. useState() useState는 state를 사용할 수 있게 하는 Hook 함수입니다. useState는 배열 형태로 반환되며, 첫번째 요소는 현재 state 값, 두번째 요소는 state 값을 변경하는 함수입니다. 기초 문법 Const [변수명, set함수명] = useState(초기값); useState의 사용법 import React, { useState } from 'react'; function Example() { const [count, setCount] = use..