컴포넌트 종류 1. 클래스형 컴포넌트 import React, { Component } from 'react' export default class List extends Component { render() { return ( List ) } } 2. 함수형 컴포넌트 2-1. 일반 함수형 import React from 'react' export default function List() { return ( List ) } 2-2. 화살표 함수형 import React from 'react' const List = () => { return ( List ) } export default List 여러 프레임워크나 라이브러리에 따라 다양한 종류가 있겠지만 내가 택한 것은 강의에서 추천한 위의 snippe..

Custom Hooks란?개발자가 스스로 커스텀한 Hook을 의미하며, 커스텀 훅(Custom Hook)은 함수형 컴포넌트에서 상태 관리 로직을 재사용할 수 있는 JavaScript 함수입니다. 커스텀 훅을 사용하면 컴포넌트 내부의 상태 관리 로직을 추출하여 별도의 함수로 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 커스텀 훅은 고차 컴포넌트(Higher-order Components)나 렌더 프롭(Render Props)을 사용하지 않고도 컴포넌트 간에 기능을 공유하는 방법입니다. 주로, 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 사용합니다. Custom Hook을 이용한다면 아래의 장점이 있습니다.상태관리 로직의 재..

React는 사용자 인터페이스 구축에 중점을 둔 JavaScript 라이브러리입니다. React의 주요 기능 중 하나는 불필요한 재렌더링을 줄여 렌더링 성능을 최적화하는 기능입니다. React는 메모이제이션이라는 프로세스를 통해 이를 달성합니다. 메모이제이션은 값비싼 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐싱된 결과를 반환하는 기술입니다. 메모이제이션은 입력을 기반으로 함수의 결과를 캐싱하는 프로세스입니다. 동일한 입력이 함수에 다시 전달되면 함수를 다시 계산하는 대신 캐시된 결과가 반환됩니다. useMemo를 사용하면 함수의 결과를 메모하고 종속성이 변경될 때만 다시 계산할 수 있습니다 useMemo 이란? useMemo은 특정 값(value)를 재사용하고자 할 때 사용하는 Hoo..

아니.. Redux를 배웠는데 Redux Toolkit은 또 뭐야? 리덕스랑 다른건가? 새로 또 배워야 하는건가? 라고 생각했다면 일단 한숨 돌리자.. Redux Toolkit(리덕스 툴킷)? Redux Toolkit은 Redux의 개념을 기반으로 만들어진 것이며 Redux와 함께 사용할 수 있는 라이브러리로, Redux의 개념과 기능을 보완하고 간편화 시켜놓은 Toolkit, 말그대로 도구 세트라 생각하면 될 것 같다. Redux Toolkit이 Redux 안에 포함되어 있는 개념이라 햇갈릴 수 있는데, Redux와 함께 사용할 수 있는 별도의 라이브러리다. Redux Toolkit을 사용하면 Redux의 개념과 기능을 간소화하고 추상화하여 코드의 양을 줄이고 가독성을 높이며, Redux의 보일러플레이..

1. 다음 중 상태 관리 라이브러리로 옳은 것을 모두 고르세요. A.React Context B.Redux C.React D.MobX 더보기 A.React Context B.Redux C.React D.MobX React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됩니다. 상태 관리 라이브러리로는 React Context, Redux, MobX 외 에도 recoil, zustand 등이 있습니다. 2.다음 중 상태 관리 라이브러리를 사용하는 이유를 모두 고르세요. A.Single source of truth(신뢰할 수 있는 단일 출처) 원칙을 유지하게 도와준다. B.전역 상태 저장소를 제공한다. C.Props drilling 이슈를 해결한다. D.웹 애플리케..

Redux(리덕스)란? Redux(리덕스)는 JavaScript 애플리케이션의 상태 관리를 위한 라이브러리 중 하나다.(React 없이도 사용할 수 있는 상태 관리 라이브러리, 리덕스는 리액트의 하위 라이브러리 개념이 아니다. ) 상태 관리 상태 관리란? 먼저 상태(State)란 애플리케이션에서 변하는 데이터를 의미한다. 예를 들어, 사용자가 입력한 폼 데이터나, 서버에서 가져온 데이터, 현재 로그인 상태 등이 모두 상태에 해당한다. gjy0605.tistory.com Redux의 3가지 원칙 Single source of truth : Redux는 단방향 데이터 흐름을 따른다. 즉, 애플리케이션의 상태는 한 곳(store)에서 관리된다. State is read-only : Redux는 읽기전용이다. ..

상태 관리란? 먼저 상태(State)란 애플리케이션에서 변하는 데이터를 의미한다. 예를 들어, 사용자가 입력한 폼 데이터나, 서버에서 가져온 데이터, 현재 로그인 상태 등이 모두 상태에 해당한다. 이러한 상태를 관리한다는 뜻의 상태 관리(State management)란 애플리케이션의 상태를 효율적으로 관리하기 위한 기술이다. 상태관리(라이브러리) 필요성 상위 컴포넌트에서 상태를 전달받을 경우 단계가 많지 않다면 큰 문제가 없었겠지만 만약 하위 컴포넌트가 복잡하고 수없이 많이 존재했다면 어떻게 전달할까? props로 내려주는것도 한계가 있을것이다.(Props drilling 문제 발생) 이렇듯 대규모 애플리케이션에서는 상태가 매우 복잡해지고, 여러 컴포넌트에서 공유되기 때문에, 상태를 관리하기 위한 효율..

리엑트 컴토넌트 만들기 css는 정리되지 않아서 나중에 다시 정리해야 할 것 같다. Modal Toggle Tab Tag Autocomplete ClickToEdit Modal Open Modal 버튼을 클릭하면 Opened!로 바뀌면서 모달창이 화면에 나타나야 한다. Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. 모달창을 구현하면서 CSS의 position과 stopPropagation에 대해 익힐 수 있었다. import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // TODO : Mod..