개발 공부 기록 중..

useContext Hook  React의 useContext는 Context API를 함수형 컴포넌트에서 더 간결하게 사용할 수 있게 해주는 훅이다. useContext는 인자로 context 객체를 받고, 그 context의 현재 값을 반환한다.   useContext 사용법 import React, { useContext } from 'react';import MyContext from './MyContext';function MyComponent() { const contextValue = useContext(MyContext); return {contextValue};} 위 예시에서 useContext 훅은 MyContext의 현재 값을 반환하고 이 값을 contextValue에 할당한다. ..

Context API 기초 React의 Context API는 컴포넌트 트리의 모든 레벨에 걸쳐 데이터를 공유할 수 있게 해주는 도구이다. 예를 들어, 로그인 정보, 테마, 로케일 등의 설정과 같이 많은 컴포넌트들이 필요로 하는 값을 Context를 통해 쉽게 전달할 수 있다.   Context APIReact의 Context API는 createContext, Provider, Consumer의 3가지 주요 요소로 구성되어 있다.createContext: Context 객체를 생성. 이 함수는 인자로 컨텍스트의 초기값을 받음import React from 'react';const MyContext = React.createContext(defaultValue);  Provider: Context를 제공..

useEffect cleanup함수     useEffect Cleanup FunctionuseEffect Hook의 주요 사용처 중 하나는 component가 언마운트되거나 업데이트 되기 전에 특정 작업을 수행하는 것이다. 이러한 경우에 useEffect의 반환값으로 cleanup function을 사용한다. Cleanup function은 useEffect 내에서 선언된 사이드 이펙트를 정리하는 역할을 한다.useEffect(() => { const identifier = setTimeout(() => { console.log('입력값 검증 시작!'); setFormIsValid( enteredEmail.includes('@') && enteredPassword.trim().le..

Side Effect와 useEffect Hook      React에서의 Side Effect와 useEffectSide Effect란?함수형 프로그래밍에서 말하는 용어로, 함수 내부에서 함수 외부에 영향을 미치는 것을 의미한다. 즉, 함수 외부의 상태를 변경하거나, 함수 실행 동작이 함수 외부의 상태에 의존하는 경우를 말한다. React 컴포넌트에서의 Side Effect들은 주로 다음과 같은 것들이 있다.데이터를 가져오거나, 구독하거나, 수동으로 변경하는 등의 I/O 작업DOM을 직접적으로 조작하는 작업setTimeout이나 setInterval 같은 타이머를 설정하는 작업import React, { useState, useEffect } from 'react';import Login from '...

React.Fragment     React FragmentReact의 Fragment는 일련의 자식 요소를 그룹화하되, 불필요한 DOM 노드를 추가하지 않고 컴포넌트를 반환하는 기능이다. 이는 DOM에 추가적인 노드를 생성하지 않아도 되는 상황에서 유용하다. React Fragment  사용 이유React 컴포넌트는 기본적으로 단일 루트 노드만 반환해야 하는 규칙이 있다. 그러나 이 규칙이 문제가 될 수 있는 경우가 있다. 예를 들어, 여러 자식 요소를 반환하고 싶지만, 불필요한 wrapper 엘리먼트 (예: div 또는 span)를 DOM에 추가하고 싶지 않은 경우, Fragment를 사용하면 이 문제를 해결할 수 있다.Fragment를 사용하면, 여러 자식 요소를 그룹화하여 반환하면서, 이는 실제 ..

Styled Component     Styled-componentsStyled-components는 CSS-in-JS 라이브러리 중 하나로, JavaScript 코드 내에서 CSS 스타일을 작성할 수 있게 해준다. 이 라이브러리는 스타일이 적용된 컴포넌트를 생성하므로, CSS 클래스 이름 충돌 문제를 피하고 스타일의 재사용성을 높일 수 있다.    설치하기Styled-components 라이브러리는 npm을 통해 설치할 수 있으며, 프로젝트 디렉토리에서 다음 명령어를 실행한다.npm install --save styled-components     사용 방법Styled-components를 사용하려면 먼저 라이브러리를 import 해야 한다.import styled from 'styled-compone..

동적으로 스타일 설정 하기       동적으로 인라인 스타일 설정 하기React에서는 JavaScript의 동적인 특성을 이용하여 인라인 스타일을 동적으로 설정할 수 있다. 이는 style prop에 객체를 전달하여 달성할 수 있으며, 이 객체의 각 키는 CSS 속성을, 각 값은 CSS 속성 값에 해당하는 문자열을 나타낸다. 이 예시에서는 입력값의 유효성에 따라서, 레이블과 입력 필드의 스타일을 동적으로 변경하고 있다.나의 목표       동적인 인라인 스타일의 단점그럼에도 불구하고, 동적인 인라인 스타일 사용은 여러 가지 이유로 권장되지 않는다.Specificity: 인라인 스타일은 CSS의 다른 모든 형태에 비해 우선순위가 높다. 이로 인해 CSS 규칙의 우선 순위가 깨질 수 있으며, 이를 해결하려면..

동적 리스트 다루기   React에서의 동적 리스트 렌더링 및 key propJavaScript에서, 배열의 map 메소드는 배열의 각 요소에 함수를 적용하고 그 결과로 새 배열을 반환한다. 이 기능을 활용하여 React에서 리스트를 동적으로 렌더링하는 것이 가능하다.import React, { useState } from "react";import ExpenseItem from "./ExpenseItem";import "./Expenses.css";import Card from "../UI/Card";import ExpensesFilter from "./ExpensesFilter";const Expenses = (props) => { const [filteredYear, setFilteredYear]..

React에서의 상향식 데이터 전달 (Props Drilling)React에서 자식 컴포넌트는 직접적으로 부모 컴포넌트의 상태를 변경할 수 없다. 따라서, 상태 변경이 필요한 경우 부모 컴포넌트로부터 함수를 전달받아 자식 컴포넌트에서 해당 함수를 호출하게 된다. 이를 통해 자식 컴포넌트는 부모 컴포넌트에게 상태 변경을 요청하게 되는데, 이러한 패턴을 보통 "상향식 데이터 전달"이라고 부른다. 이를 통해, 자식 컴포넌트에서 발생하는 이벤트를 부모 컴포넌트에서 처리할 수 있게 된다. 이는 중요한 이유로, React의 주요한 원칙 중 하나는 단방향 데이터 흐름이며, 이 원칙에 따르면 상태는 항상 위에서 아래로 (부모에서 자식으로) 흐르게 된다.     예시예시로 주어진 코드에서 ExpenseForm 컴포넌트와..

상태값    React의 상태(State)React에서 상태(state)란 컴포넌트 내부에서 관리되는 데이터를 의미한다. 이 상태값은 사용자의 입력, API 응답 등으로 인해 시간에 따라 변할 수 있는 값이다. 상태는 컴포넌트의 렌더링 결과를 결정하는 요소 중 하나로, 상태가 변경되면 컴포넌트는 재렌더링된다. 왜 상태값이 필요한가?상태값은 사용자와 상호작용하는 동적인 웹 애플리케이션을 만들 때 필요하다. 예를 들어, 사용자가 버튼을 클릭하여 토글 가능한 UI 요소의 상태를 변경하거나, 사용자가 입력한 텍스트를 저장하고 보여주는 등의 기능을 구현할 때 상태값이 필요하다. 상태값의 불변성React에서 상태값의 불변성(immutability)은 매우 중요한 개념이며, 상태값을 직접 수정하는 대신, 새로운 상태..