본문 바로가기

전체 글139

[발표] useReducer / useContext / useRef useReducer상태 관리를 위해 사용하는 훅 중 하나로 상태가 복잡하거나 상태 변화 로직이 여러가지로 나뉠 때 유용함.상태(state): 컴포넌트의 현재 상태. 어떤 값이나 객체일 수 있음reducer: 상태와 액션을 받아 새로운 상태를 반환하는 함수이다. 액션 : 상태를 어떻게 변경할지를 설명하는 객체이다. 일반적으로 type 속성을 가집니다. 예: { type: 'increment' }useReducer를 사용하기 위해서는 다음 세 가지가 필요하다.초기 상태 (initial state)리듀서 함수 (reducer function)디스패치 함수 (dispatch function) import React, { useReducer } from 'react';// 초기 상태 정의const initial.. 2024. 5. 30.
[DIL] useRef useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 훅이다.const ref = useRef(initialValue) 컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. import { useRef } from 'react';function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 매개변수useRef는 단일 프로퍼티를 가진 객체를 반환한다. current : 처음에는 전달한 initialValue로 설정된다. 나중에 다른 값으로 바꿀 수 있고 ref객체를 JSX노드의 ref속성으로 리액트에 전달하면 리액트는 current 프로퍼티를 설정한다. 다음 렌더링에서 use.. 2024. 5. 30.
[DIL] useContext useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 리액트 훅이다.const value = useContext(SomeContext) 컴포넌트의 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독한다. import { useContext } from 'react';function MyComponent() { const theme = useContext(ThemeContext); // ... 매개변수 context : 이전에 createContext로 생성한 context 이다. context자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낼 뿐이다. 반환값useContext는 호출하는 컴포넌트에 대한 context.. 2024. 5. 29.
[TIL] 주석으로 함수에 추가설명 넣기 협업 시 다른 개발자가 한번에 알아 볼 수 있도록함수이름을 잘 지어줘야하는데 가끔 애매한 경우가 생긴다.그럴때에는 작성함 함수 위에 주석을 넣어주면 된다.이때 주석을 // 이 아닌 /** */로 써줘야 한다.   위에 처럼 주석을 적고해당 함수가 사용되는 곳으로 가서 마우스 오버를 하면 2024. 5. 29.
[DIL] useReducer(2) 초기 state 재생성 방지하기React는 초기 state를 한번 저장하고 다음 렌더링에서 이를 무시한다.function createInitialState(username) { // ...}function TodoList({ username }) { const [state, dispatch] = useReducer(reducer, createInitialState(username)); // ... createInitialState(username)의 결과는 초기 렌더링에만 사용되지만, 이후의 모든 렌더링에서도 여전히 이 함수를 호출한다. 이는 큰 배열을 만들거나 값비싼 계산을 수행하는 경우 낭비가 될 수 있다. 이 문제를 해결하려면  useReducer 세번째 인수에 초기화 함수를 전달할 수 있다... 2024. 5. 28.
[TIL] useState와 useRef의 차이 useState와 useRef 모두 React에서 쓰이는 훅으로 useState는 state를 useRef는 initialValue를 관리한다. 아래는 useState를 사용한 예시이다.import { useState } from "react"; function App () { const [inputValue, setInputValue] = useState(""); const addTextHandler = (e) => { setInputValue(e.target.value); } return ( {inputValue} );}export default App  useState영상에서 보는 바와 같이 입력란에 타이핑 하는 즉시 텍스트가 화면에 반영이 되는 것(.. 2024. 5. 28.
[DIL] useReducer(1) useReducer(reducer, initialArg, init?)useReducer는 컴포넌트에 reducer를 추가할 수 있는 React입니다.const [state, dispatch] = useReducer(reducer, initialArg, init?)컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer를 통해 state를 관리 할 수 있다.import { useReducer } from 'react';function reducer(state, action) { // ...}function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... 매개변수( Parameters )r.. 2024. 5. 27.
[TIL] 'contents.find' is missing in props validation 경고문 없애기 로직에 뜨면 불안감 조성되는 이 빨간 경고문을 지워보도록 하겠습니다. 리액트 안에 여러 파일 중 .eslintrc.cjs 로 들어가서 rules 에 아래와 같이 추가하고 저장하면 끝! "react/prop-types": "off" 2024. 5. 27.
vscode 자동 들여쓰기 적용하기 1. vscode를 실행한다2. 좌측 하단에 톱니바퀴 아이콘 = 설정에 들어간다.3. 설정검색칸에 'formatter'를 검색한다.4. Editor: Default Formatter를 확인하고 아래 옵션에 Prettier - Code formatter를 선택한다.5. 작성하던 파일로 들어가서 Ctl+A로 코드 전체 선택하고 Shift+Alt+F를 누르면 자동 들여쓰기 완료! 2024. 5. 23.
[DIL] useState 사용법 컴포넌트에 state 추가하기 컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수를 선언한다.import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(42); const [name, setName] = useState('Taylor'); // ...배열 구조 분해를 사용하여 [something, setSomething]과 같은 state 변수의 이름을 지정하는 것이 관례이다. useState는 state 변수는 처음에 제공한 초기 state이다.그리고 상호작용에 반응하여 다른 값으로 변경할 수 있는 set함수이다.화면의 내용을 업데이트하려면 다음 state로 set 함.. 2024. 5. 20.
윈도우와 Mac 리액트 타입스크립트 설치하기 윈도우1. Node.js 설치먼저 Node.js가 설치되어 있어야 합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 최신 버전을 다운로드하여 설치합니다.2. Vite와 React 프로젝트 생성Step 1: 터미널 또는 명령 프롬프트 열기Windows 키를 누르고 "cmd" 또는 "PowerShell"을 입력하여 명령 프롬프트 또는 PowerShell을 엽니다. 혹은, Visual Studio Code와 같은 통합 개발 환경(IDE)에서 터미널을 열 수도 있습니다.Step 2: 프로젝트 생성 명령 실행아래 명령을 실행하여 Vite와 React를 사용한 새로운 프로젝트를 생성합니다:# Vite 프로젝트 생성 명령 실행npm create vite@latest my-react-app --templa.. 2024. 5. 18.
[TIL] 호이스팅(hoisting)이란? 변수와 함수 선언이 해당 범위의 최상위로 끌어올려지는 동작을 말한다. 자바스크립트는 실행 전 한번 훑어보기 때문에 변수와 함수 선언이 먼저 처리되는 것이다.이처럼 끌어올려진 것처럼 동작하여 호이스팅이라고 한다. 변수 호이스팅변수 호이스팅은 변수를 선언하는 var 키워드를 사용할 때 발생한다. var로 선언된 변수는 코드의 최상위로 호이스팅되지만, 초기화는 호이스팅되지 않는다. 따라서 변수 선언은 최상위로 올라가지만, 변수 값은 실제 할당 지점에서 초기화된다. console.log(x); // undefinedvar x = 5;console.log(x); // 5 위 코드에서는 var x 선언이 호이스팅되어 최상위로 이동하지만, 초기값 할당(x = 5)은 원래 위치에 남아 있다. 따라서 첫 번째 conso.. 2024. 5. 17.

티스토리툴바