웹 (17) 썸네일형 리스트형 [React] useMemo 사용하기 오늘은 useMemo 라는 리액트 훅을 사용해보자. useMemo 리렌더링 사이에서 계산 결과를 저장할 수 있다. useMemo는 컴포넌트 최상단에서 호출한다.1. useMemo의 개념을 간단하게 알아보자.const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); 위 코드는 아주 간단한 사용예다. 매개변수로는 2개의 값을 가진다. 첫번째로는 calculateValue로 저장하려는 값을 계산하는 함수다. 이 함수는 조건이 존재한다.1. 순수함수2. 인자를 받지 않음3. 어떤 타입이든 값을 반환해야 함 리액트는 맨 처음 랜더링 중에 이 함수를 호출한다. 그리고 나서 이후의 렌더링에서는 두번째 인자로 들어가는 의존성 배.. [React] reducer와 useReducer 사용하기 이번에는 reducer와 useReducer를 공부해보자. 컴포넌트가 복잡해지면 컴포넌트의 state들이 업데이트 되는 것들을 한번에 파악하기 어려울 수 있다. 예를 들어서 어떠한 배열인 state가 있고, 이 state에 요소를 추가하거나 제거하거나 업데이트 하는 세가지의 이벤트 헨들러(이 녀석들은 모두상태 변화 함수를 통해서 state를 변경)가 있다고 한다면 여기저기 흩어져 있는 이벤트 헨들러를 관리하기가 어려울 것이다. 또한 흩어져 있다 보니 코드의 양도 길어질 것이다. 코드의 양을 줄이고 모든 헨들러에 접근하기 쉽게 한곳에 모으기 위해서 reducer라는 단일 함수를 사용한다. 즉, reducer는 state를 관리하는 또 다른 방법인 것이다. 3단계를 거쳐서 state들을 reducer를.. [React] useEffect 사용하기 useEffect는 리액트에서 컴포넌트의 side effect를 제어하는 리액트 훅이다. 컴포넌트의 side effect는 무엇인가? 리액트에서 컴포넌트의 사이드 이펙트란 컴포넌트가 어떤 동작을 했을때 발생하게 되는 파생적인 효과를 말한다. 예를 들어서컴포넌트의 어떤 값이 변경되었을 때 콘솔레 변경된 값을 출력하거나,컴포넌트가 마운트 되었을 때 콘솔에 Mount라고 출력하거나, 컴포넌트가 리렌더링(업데이트) 되었을 때 콘솔에 Update라고 출력하거나,컴포넌트가 언마운트 되었을 때 콘솔에 Ummount라고 출력하는 상황을 말한다. 이렇게 라이프 사이클을 제어하는 것도 컴포넌트의 사이드 이펙트라고 할 수 있다. 이번에 알아볼 useEffect를 이용하면 이러한 사이드 이펙트들을 제어할 수 있다. 내가 만약.. [React] React Hooks 리액트 훅스는 클래스 컴포넌트에서만 사용할 수 있는 리액트의 특수한 기능들을 함수 컴포넌트에서도 사용할 수 있도록 도와주는 메소드들을 말한다. 옛날에는 클래스로만 컴포넌트를 만들었다. 그때는 함수 컴포넌트는 UI 랜더링만 되고 리액트 훅스의 모든 기능을 사용할수 없었다. 근데 클래스 컴포넌트는 문법이 너무 더러웠다. 그래서 여러 사람들의 필요에 의해서 함수 컴포넌트에서도 클래스 컴포넌트에서만 사용할 수 있었던 기능들을 사용할 수 있도록 리액트 훅스를 개발했다. 사실 지금까지 useState와 useRef는 리액트 훅이었음. 리액트 훅들은 기능 앞에 접두사로 use가 붙는다. 대략적으로 20개 정도의 훅이 존재한다. 리액트 훅들은 몇가지 조건이 있다.1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능2... [React] useRef로 컴포넌트의 변수 생성하기 useRef는 useReference의 줄임말로 컴포넌트 내부에 새로운 레퍼런스 객체를 생성해준다. 그리고 이렇게 생성한 레퍼런스 객체는 컴포넌트 내부의 변수로써 일반적인 값들을 저장할 수 있다. 이는 useState와 같아보인다. 하지만 값이 변경되면 컴포넌트를 리렌더링하는 useState와 달리 useRef는 어떤 경우에도 리렌더링을 발생시키지 않는다. 따라서 렌더링에 영향을 미치고 싶지 않은 변수를 생성할 때 useRef를 이용하게 된다. 또한 useRef를 이용하면 컴포넌트가 렌더링하는 특정 DOM 요소에 접근할 수 있고 그 요소를 조작할 수 있다. 예를 들어서 어떤 요소에 focus를 주거나, 어떤 요소의 스타일을 변경할 수 있다는 것이다. 먼저 지지난 시간부터 이어서 만들었던 Register... [React] State로 사용자 입력관리하기2 지난 시간에 완성했던 코드를 살펴보자.import React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { const [name, setName] = useState("너의이름은"); const [birth, setBirth] = useState(""); const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const onChangeName = (e) => { setName(e.target.value); }; const onChangeBirth = (e) => { set.. [React] State로 사용자 입력 관리하기1 이번에는 state로 사용자의 입력을 관리해볼 것이다. 간단한 예시로 회원가입 컴포넌트를 만들어 보았다.//Register.jsimport React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { return ( );};export default Register;먼저 인풋에 들어오는 값으로 사용자의 이름을 설정해보자.//Register.jsimport React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { const [name.. [React] State를 props로 전달하기 이번에는 State를 컴포넌트의 props로 전달해보는 시간을 가질 것이다.//App.jsimport { useState } from "react";import "./App.css";const Bulb = ({ light }) => { return {light ? 😐 : 😑};};function App() { const [count, setCount] = useState(5); const [light, setLight] = useState(false); return ( setLight(!light)}> 현재 상태: {light ? "ON" : "OFF"} {count} .. 이전 1 2 3 다음
