개념 창고/React

React Hooks

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

[React] Context란?

기존 일반적인 React는 일반적으로 컴포넌트의 props를 통한 데이터 전달 부모에서 자식으로 단방향. 자주 사용하는 데이터의 경우 코드도 복잡하고 사용하는데 불편. 그래서 Context 가 등장함. 컨텍스트는 다른 레벨의 많은 컴포넌트가 특정 컴포넌트를 필요로할 때 주로 사용 Context 는 props 를 통해 전달하는 방식 대신 Component에게 곧바로 전달한다. 로그인 정보나 프로필 정보 등을 이동시키려면 반복 코드가 많아지고 지저분해진다. Context 사용시 Context 언제 사용해야할까? 여러 개의 Component들이 접근해야하는 데이터를 전달해야할 때 ex) 로그인 여부(+ 로그인, 로그아웃 버튼 노출시 확인 필요), 로그인 정보, UI테마, 현재 언어, 지역 정보 등 기존 방식으..

[React] Composition vs Inheritance

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

[React] Form

Form : 사용자에게 입력을 받기위해 사용 두 Form의 역할은 같지만 조금 다르다. HTML에서의 Form : Element 내부에 각각의 state가 존재 React에서의 Form : React는 컴포넌트 내부에서 state를 통해 데이터를 관리 Form은 Controlled Components 는 통제를 받는데 값이 리액트의 통제를 받는 Input Formr Element이다. HTML에선 자바스크립트로 값에 접근하기가 쉽지 않지만 React에선 Component에 접근하면 모든 값 Controller이 가능하다. (Class Component 기준 이미지이며, 함수 컴포넌트에선 useState Hook으로 관리 가능하다.) 여러, 단일 모든 입력의 값을 Controllered Component로..

[React] List and Keys

List는 같은 아이템을 모아놓은 것 . 목록 그 것을 위한 자료 구조 Array 배열. Array(배열) :JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것이다. key : 열쇠 / 열쇠는 모양이 다 다르고 고유하다. 키는 중복이 없고 고유한 값이다. 값은 중복될 수 있지만 키는 중복이 안된다. React에선 아이템을 구분하기 위한 고유한 문자열을 이야기한다. 여러 개의 Component 렌더링하기 같은 컴포넌트를 화면상에 계속 나타나게 할 때 사용한다. 동적으로 화면이 바뀌는 경우 코드를 하나씩 넣기도 어렵고, 유지보수도 어렵다. 이 때 사용하는 것이 JS의 Map() 이다. 영단어 Mapping 을 떠올리면 쉽다. 값을 짝 지어준다. 어떤 처리를 한 뒤 리턴해준다. Map 예시 con..

[React] 조건부 렌더링(Conditional Rendering)

Condition 은 조건을 의미한다. 조건부 렌더링(Conditional Rendering) : 특정 조건에 따라서 랜더링이 달라지는 것 보통 true / false 로 조건에 따라 다르게 렌더링한다. java script의 truthy / falsy true {} (empty object) [] (empty array) 42 (number, not zero) "0", "false" (string, not empty) // falsy 0, -0 (zero, minus zero) 0n (bogInt zero) '', "", `` (empty string) null undefined NaN (not a number) 개발시 true와 false를 예상하며 해야하기 때문에 구분할 줄 알아야 한다. Eleme..

[React] Event

컴퓨터 프로그램의 Event는 사건을 의미한다. 특정 사건이다. 사용자가 버튼을 클릭한 이벤트 등. 그 때 필요한 동작을 해줘야한다. 이벤트 처리하는 것을 이벤트 핸들링한다고 함. // DOM의 Event Activate // React의 Event Activate // 동일한 동작을 하는 함수이다. // 표기법과 함수 전달의 방법에서 차이가 있다. // React에선 카멜케이스를 쓴다. // ex)camelCase Event Handler : 이벤트 발생시 해당 이벤트를 처리하는 함수. Event Listener로 부르기도 한다. 클래스함수들이 기본적으로 바운딩되지 않는다. bind 없이 this 를 쓰면 글로벌로 호출이 되기 때문에, 함수 이름 뒤 괄호 없이 사용하려면 바인딩 해야한다. 그러지 않기 ..

[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..