프론트엔드(Front-End) (25) 썸네일형 리스트형 [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 객체라고 부르며 리액트에서는 이 객체를 통해 이벤트를 핸들링하게 됩니다. 사용 상 네이티브 이벤트 객체와 크게 다르진 않지만, 리액트 이벤트 객체인 만큼 몇 가지 다른점이 존재하긴 합니다. 리엑트에서는 네이티브 .. [REACT] 리액트의 STATE 1. REACT STATE란? 리액트의 state란 컴포넌트 내에서 바뀔 수 있는 값을 말합니다 react의 컴포넌트의 props는 부모 컴포넌트로부터 받은 값을 그저 읽기 전용으로 사용할 수 밖에 없습니다. 그러나 react의 state를 사용하면 부모 컴포넌트로부터 받은 값으로 여러가지 데이터 처리가 가능합니다. 리액트의 state와 props는 구분되는 개념입니다. (같지 않음) 클래스형 컴포넌트의 state 클래스형 컴포넌트에서는 크게 두가지 방법으로 state를 선언할 수 있습니다. 첫번째는 생성자를 이용하여 state를 설정하는 방법입니다. 두번째는 state = {} 문법으로 선언하는 방법입니다. 생성자로 state를 선언하고 사용한 경우 import { Component } from "re.. [REACT] 리액트의 컴포넌트(COMPONENT) 1. REACT의 컴포넌트(Component)란? 리액트는 화면을 컴포넌트(Component) 단위로 구성합니다. 컴포넌트란 화면을 구성할 수 있는 각각의 자바스크립트 파일들을 의미하며 root 태그로 묶여있습니다. 리액트는 이것을 **컴포넌트(Component)**라고 부르며 이것을 기준으로 화면을 렌더링합니다. 컴포넌트가 된 js 파일들은 App.js에서 정말로 부품처럼 사용이 가능합니다. 예컨데, MyCompoent.js 라는 이름을 가진 js 파일은 App.js 에서 태그로 사용 가능합니다. 2. 리액트의 컴포넌트 타입 리액트의 컴포넌트는 크게 두가지 타입으로 나뉩니다. 하나는 클래스형 컴포넌트이고 다른 하나는 함수형 컴포넌트 입니다. 함수형 컴포넌트는 본래 리액트 컴포넌트의 state를 다루지 .. 이전 1 2 3 4 다음
