세현's 개발로그

◈ Context 자식 컴포넌트에게 전달하기 위해 그냥 거쳐가는 props(props drilling)가 존재하는 문제를 해결하기 위해 Context를 사용한다. 형식은 다음과 같다. App.js 1) export const DiaryStateContext = createContext(null); data를 전역적으로 전달하기 위한 Context API를 만들어준다. 다른 컴포넌트들도 사용할 수 있도록 하기 위해 export를 써준다. 2) export const DiaryDispatchContext = createContext(null); onCreate, onRemove, onEdit을 전역적으로 전달하기 위한 Context API를 만들어준다. 마찬가지로 export 해준다. 3) const mem..

◈ useReducer 지금까지 작성한 App.js 코드는 useState가 너무 많아 컴포넌트 내의 내용이 너무 복잡하다는 문제가 있다. 이를 해결하기 위해 useReducer를 사용하여 상태변화로직을 App.js컴포넌트로부터 분리한다. useReducer는 const [data, dispatch] = useReducer(reducer, []); 이러한 형식을 사용하는데 이때 배열의 비구조화할당에서 0번째 인자는 항상 state이고, 두 번째 인자는 dispatch이다. useReducer의 첫 번째 인자는 reducer(상태변화처리함수)이고 두 번째 인자는 state의 초기값이다. 상태변화처리함수인 reducer는 컴포넌트 밖으로 분리하여 직접 만들어줘야 한다. const reducer = (stat..

◈ useCallback()이란? useCallback(() => {}, []); 첫 번째 인자 = 콜백함수 두 번째 인자 = 의존성배열(댑스) 댑스 배열 안에 있는 값이 변화하면 memoization 된 콜백함수가 반환된다. useMemo()와 deps가 변하면 memoization 된 것을 반환한다는 점에서 같지만, useMemo()는 함수의 값을 반환, 함수의 연산량이 많을 때 이전 결과값을 재사용하는 목적이고, useCallback()은 함수를 반환, 함수가 재생성 되는 것을 방지하기 위함이다. ◈ useCallback() 사용 - 1 일기리스트에 있는 목록 중 하나를 삭제하면 DiaryEditor 컴포넌트도 랜더링 된다. 근데, 일기리스트와 일기작성폼(DiaryEditor)는 연관이 없는데 불필..

◈ Memoization 답을 기억하는 메모이제이션을 프로그래밍에도 사용할 수 있다. ◈ 최적화 최적화는 쉽게 말해 re-render 되는 횟수를 줄이는 것이다. 1. Props가 변경 2. State가 변경 3. 부모 컴포넌트가 re-render 4. Context value가 변경 메모이제이션을 이용하여 rendering 최적화를 해보자. App.js 1) const getDiaryAnalysis = useMemo(() => { if (data.length === 0) { return { goodcount: 0, badCount: 0, goodRatio: 0 }; } console.log("일기 분석 시작"); const goodCount = data.filter((it) => it.emotion >..

◈ API 호출하기 useEffect를 이용하여 컴포넌트의 Mount 시점에 API를 호출해보자. App.js 1) const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then((res) => res.json()); async/await을 이용하여 getData가 promise를 반환하는 비동기 함수를 만들어주었다. fetch에 API의 URL을 넣어주고, then을 이용하여 결과를 json 형식으로 받아주었다. consol.log(res);를 해보면 데이터가 잘 전달되었음을 확인할 수 있다. 2) const initData = res.slice(0, 20).map((i..

◈ React의 생애주기 React 컴포넌트의 생애주기를 다루는 메소드들은 클래스형 컴포넌트에서만 사용 가능하다. 그러나 우리는 함수형 컴포넌트에서도 이런 기능을 사용할 수 있도록 만들어진 React Hooks를 사용한다. React Hooks는 클래스형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등등을 해결하기 위해 등장했다. 이 중 React의 생애주기를 관리하는 함수는 useEffect이다. ◈ useEffect useEffect의 형식은 다음과 같다. useEffect를 연습해보기 위해 LifeCycle 컴포넌트를 만들어보자. LifeCycle.js import React, { useEffect, useState } from "react"; const UnMountTest = ..

◈ 리스트 렌더링(조회) 배열을 사용하여 React에서 List를 랜더링 하고, 개별적인 컴포넌트로 만들어보자. App.js 우선, dummyList를 만들어준다. new Date() 객체를 생성하면 시간은 현재 시간을 기준으로 생성 된다. 이때 getTime이라는 메소드를 이용하면 milliseconds로 표현해준다. 그리고 추후에 만들 DiaryList에 dummyList를 props로 전달해준다. import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const dummyList = [ { id: 1, author: "이정환", content: "하이1", emotion: 5, c..

◈ useRef()React에서는 특정 DOM요소에 접근하고자 할 때 useRef를 사용한다. useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주면, Ref 객체의 .current 값은 우리가 원하는 DOM을 가리키게 된다. 우리는 이번 예제에서는 지난번 만들었던 일기장에서 작성자와 내용에 문자열이 특정 길이 이상 입력이 들어오지 않으면 그에 해당하는 DOM에 focus 처리를 해주는 기능을 구현해 볼 것이다. 먼저 React의 Hook 함수 중 useRef를 import 해준다.import { useRef } from "react"; 다음으로는 useRef() 함수를 호출해서 반환값을 const(상수)에 담아준다. 이렇게 해주면 const에..

◈ 사용자 입력 처리하기 일기장을 만들기 위해 DiaryEditor.js 파일을 생성해준다. 작성자와 내용을 입력하기 위해 각각 , 태그를 이용해 입력란을 만들어준다. 또한, 감정 점수를 선택하기 위해 태그도 만들어주었다. 태그 = 한 줄만 입력할 수 있는 입력값 태그 = 여러 줄을 입력할 수 있는 입력값 입력된 값을 리액트에서 핸들링할 수 있도록 해야하는데, 이때 이전에 배운 State를 이용한다. State를 이용하기 위해 import {useState} from "react" 해주고 변수를 설정한다. 이때, 여러 변수를 한꺼번에 관리하기 위해 여러 변수를 묶어서 State를 만들어주었다. const [state, setState] = useState({ author: "", content: "", ..

◈ State란? 상태란 계속해서 동적으로 변화하는 특정 상태다. 상태에 따라 각각 다른 동작을 한다. 컴포넌트의 테마처럼 계속 바뀌는 값이 동적인 데이터이고, 상태를 바꾸는 등의 관리는 이걸 가진 컴포넌트가 직접 관리하게 된다. ◈ useState + 버튼을 누르면 숫자가 증가하고, - 버튼을 누르면 숫자가 감소하는 Counter 기능을 만들어보자. Counter.js import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); } const onDecrease = () => { setCount..