전체 글153 [DIL] useEffect useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 리액트 훅이다.useEffect(setup, dependencies?) 컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언하다. import { useEffect } from 'react';import { createConnection } from './chat.js';function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.conn.. 2024. 6. 4. [TIL] 벤토 그리드 레이아웃 넣기 홈페이지 메인을 벤토 그리드로 꾸미고 싶을 때, 아래의 공식문서를 통해 원하는 그리드를 가져오면된다.https://mui.com/material-ui/react-masonry/ React Masonry component - Material UIMasonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.mui.com 코드를 가져와 사용하던 중 Uncaught SyntaxError: Export 'import_react3' is not defined in module (at chunk-ALR5B6M7.js?v=aa4e0109:17143:3) 위처럼 경고.. 2024. 6. 4. [발표] 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. 이전 1 ··· 8 9 10 11 12 13 다음
