프론트엔드(Front-End)/React (11) 썸네일형 리스트형 [REACT] Immer와 불변성 Immer란?? immer에 대해 이야기 하기 전 우리는 리액트의 함수형 컴포넌트와 Hook에 대하여 이해해야 합니다. https://1-hee.tistory.com/27 [REACT] 리액트의 컴포넌트(COMPONENT) 1. REACT의 컴포넌트(Component)란? 리액트는 화면을 컴포넌트(Component) 단위로 구성합니다. 컴포넌트란 화면을 구성할 수 있는 각각의 자바스크립트 파일들을 의미하며 root 태그로 묶여있습니다. 리 1-hee.tistory.com https://1-hee.tistory.com/33 [REACT] 리액트와 훅(HOOK) 리액트의 훅(Hook)이란? 리액트의 함수형 컴포넌트는 클래스형 컴포넌트와 같은 문법으로 state를 생성, 작성, 수정 등이 어렵습니다. 그래서 .. [REACT] Context API ContextAPI란? 리액트에서 컴포넌트간 데이터의 흐름은 단방향 입니다. 이러한 특징은 JavaScript라는 언어의 특성 상 디버깅이 어렵다는 단점을 보완하기 위해 도입된 rule에서 기인하는데요. 그래서 컴포넌트 간에 데이터를 전달하려면, 부모 컴포넌트로부터 props의 형태로 값을 물려 받아야 할 것입니다. 개발을 편하게 하려고 이러한 규칙을 정했다지만, 개발을 하다보면 컴포넌트 간에 데이터를 송수신 해야 할 경우가 무척이나 많겠죠? 아래의 모식도를 보겠습니다. 리액트로 개발된 어떤 SPA가 위의 모식도와 같이 구성되어 있다고 가정해 봅시다. 개발자가 C라는 컴포넌트에서 이벤트가 발생하면 이웃한 B와 E 컴포넌트에서 어떤 데이터가 반영되고자 한다면 모식도 처럼 최상위 컴포넌트인 App 컴포넌트부.. [REACT] 리액트와 라우터(Router) 라우터란? 화면에 보여질 컴포넌트를 동적으로 전환할 수 있도록 하는 기능입니다. 구체적으로 설명하자면, 화면에 보여질 컴포넌트들을 사용자가 URL에 맞추어 구성하는 것입니다. 리액트의 컴포넌트만으로도 화면을 구성할 수 는 있지만, 다양한 사용자의 요청에 대해서 동적으로 화면을 구성하고 동적으로 바꾸려면 라우팅 기능은 필수입니다. index.js와 라우터 App.js 파일도 거슬러 올라가면 Router로 구성되어 있습니다. BrowserRouter라는 태그로 감싸진 형태입니다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportW.. [REACT] 리액트와 훅(HOOK) 리액트의 훅(Hook)이란? 리액트의 함수형 컴포넌트는 클래스형 컴포넌트와 같은 문법으로 state를 생성, 작성, 수정 등이 어렵습니다. 그래서 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 state나 여러 값들 그리고 각종 가변적인 상황에 대해 대응할 수 있도록 Hook이라는 함수를 통해 값을 다룰 수 있도록 지원합니다. useState state를 관리하기 위한 함수입니다. 자바스크립트의 destructuring 문법으로 변수, set 함수를 할당하여 사용합니다. import { useState } from "react"; const MyUseStateComp = () => { // 카운터 const [value, setValue] = useState(0); // 입력창 const [name, set.. [REACT] 리액트의 라이프사이클(LifeCycle) 리액트의 라이프사이클(LifeCycle) 리액트의 각 컴포넌트는 생성되고 사라지는 일련의 생애주기(LifeCycle)를 가집니다. 단, 라이프 사이클은 리액트의 컴포넌트 중 클래스형 컴포넌트에만 적용 가능합니다. 함수형 컴포넌트는 Hook을 통해 얼추 이 라이프 사이클을 흉내낼 수는 있지만, 기본적으로 라이프 사이클은 클래스형 컴포넌트에서 사용 가능합니다. 리액트의 라이프사이클 흐름도(Life Cycle’s Flow) 리액트는 크게 마운트 - 업데이트 - 언마운트 의 흐름을 따른다고 설명합니다. 마운트는 리액트 컴포넌트가 화면에 등장할 때 한 번 동작하는 단계로, constructor 등으로 state를 설정하는 등의 작업을 하는 단계입니다. 업데이트는 컴포넌트의 input 상자에 값이 바뀐다거나, 클릭.. [REACT] 컴포넌트 요소의 반복(map, filter) 컴포넌트의 반복 리액트에서 동일한 html 요소를 생성하는 방법은 Vanila JavaScript를 사용합니다. 자바스크립트 문법에는 map이라는 메서드를 통해 배열을 복사하거나 새롭게 계산하여 생성할 수 있습니다. 자바스크립트 map const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] react에서도 반복되는 element를 만들 때에는 map 함수와 JSX를 사용하여 생성합니다. map 함수의 문법은 다음과 같습니다. arr.map(callback, [this.Arg]) 여기서 각각.. [REACT] 리액트의 ref 리액트의 ref란? 리액트의 ref는 리액트 내부에서 state등으로 핸들링 할 수 없는 경우, 혹은 직접적으로 DOM에 접근하여 작업을 처리하거나 핸들링하기 위하여 사용합니다. 간단히 설명하자면 ref는 리액트 컴포넌트의 id입니다. html 태그의 id와 같은 역할을 합니다. ref는 다루고자 하는 컴포넌트에 ref 속성을 assign 함으로써 사용할 수 있습니다. 리액트 ref가 유용하게 쓰이는 경우는 특정 input에 focus를 주는 경우, 스크롤 박스를 접근하는 경우, Canvas 요소에 그림을 그리는 경우에 유용하게 사용됩니다. ref를 부여하면 DOM의 여러가지 속성 값에 접근할 수 있어 리액트의 일반적인 데이터의 흐름 (props, 부모 → 자식)을 거스를 수 있기 때문에 ref 통해 다.. [REACT] 리액트와 EVENT 리액트의 이벤트(Event) 리액트에서도 여러가지 함수에서 이벤트 객체를 다룰 수 있습니다. Vanila 자바스크립트에서 화살표 함수의 첫번째 매개변수 e는 Event 객체를 의미합니다. 리액트에서도 마찬가지로 화살표 함수의 첫번째 매개변수는 Event객체이나 조금 다릅니다. 리액트에서는 Vanila 자바스크립트를 네이티브 이벤트 객체라고 합니다. 그리고 리액트의 이벤트 객체는 이 네이티브 이벤트 객체를 감싸는 wrapper를 사용하게 됩니다. 이 wrapper 객체를 SyntheticEvent 객체라고 부르며 리액트에서는 이 객체를 통해 이벤트를 핸들링하게 됩니다. 사용 상 네이티브 이벤트 객체와 크게 다르진 않지만, 리액트 이벤트 객체인 만큼 몇 가지 다른점이 존재하긴 합니다. 리엑트에서는 네이티브 .. 이전 1 2 다음
