티스토리

빵 입니다.

검색하기

블로그 홈

빵 입니다.

webduck.tistory.com/m

퍼블리싱 9년 그리고 프론트엔드 개발

구독자: 1

방명록 방문하기

주요 글 목록

useState() 스케줄링 📌 useState() 훅 상태를 관리하는 훅 함수 컴포넌트에서 상태를 추가하고 관리할 수 있다. useState()는 현재 상태값과 해당 값을 갱신할 수 있는 함수를 반환한다. const [enteredDate, setEnteredDate] = useState(''); setEnteredDate를 통해 상태를 갱신하면, 우리 눈엔 즉각 적용되는 것처럼 보이지만, 실제론 상태 업데이트 스케줄링만 한 상태이다. 📌 useState() 스케줄링 React는 useState를 통해 상태를 업데이트할 때, 해당 상태 변경을 비동기로 처리하고 일괄적으로 업데이트한다. 일반적으로 useState를 호출하여 상태를 업데이트하면, React는 업데이트된 상태를 즉시 반영하지 않고, 대기열에 해당 상태 변경을 넣는다. .. 공감수 0 댓글수 0 2024. 1. 5.
리액트의 useState() 훅 렌더링 방식 ❓컴포넌트 함수가 재실행되면 useState()도 계속 재실행되는 거 아닌가? ❓그럼 매번 상태를 초기화하고 다시 렌더링 하는 건가? ❗️NO!!! React는 처음 useState가 호출될 때 해당 상태 변수를 생성하고 기본값을 사용하여 초기화를 딱 한 번 한다. (해당 변수와 연결된 값이 메모리에 저장된다.) 이때의 초기화는 컴포넌트가 처음 렌더링 될 때만 발생하며, 그 이후로는 해당 상태 변수가 이미 생성되었다면 초기화를 하지 않는다. 이후 렌더링에서는 이전에 생성된 상태 변수를 재사용하고, 값이 변경되어도 새로운 변수를 생성하는 것이 아니라 이전 변수를 업데이트하게 된다. 상태 초기화는 컴포넌트가 DOM에서 완전히 삭제되지 않는 한 (unmount 되지 않는 한) 계속 유지된다. 컴포넌트가 유지되.. 공감수 0 댓글수 0 2024. 1. 5.
useCallback() 🔥함수형 컴포넌트 기반으로 정리를 했습니다! React.memo()는 함수형 컴포넌트를 메모이제이션하여 컴포넌트의 props가 변경되지 않으면 리렌더링을 하지 않도록 만들 수 있었다. ❓그렇다면 컴포넌트만큼 많이 생성되는 게 함수인데, 함수를 메모이제이션하는 방법은 없을까? ❗️있다! useCallback() 훅을 사용하여 함수를 메모이제이션 할 수 있다. 컴포넌트가 실행되는 동안 함수를 메모이제이션하고, 해당 함수를 불필요하게 재생성하지 않도록 도와준다. 함수가 불필요하게 재생성되지 않기 때문에 불필요한 렌더링을 방지하고 메모리 사용을 최적화할 수 있다. 더보기 🔥메모이제이션 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 .. 공감수 0 댓글수 0 2024. 1. 4.
React.memo() 🔥함수형 컴포넌트 기반으로 정리를 했습니다! ❓불필요한 렌더링 발생 부모 컴포넌트의 상태나 프롭스가 변경되면 해당 부모 컴포넌트에 속한 자식 컴포넌트도 재평가 된다. > 자식 컴포넌트에게 내려주는 props의 값이 변경되지 않아도, 부모 컴포넌트의 상태가 변경되었기 때문에 자식 컴포넌트도 리렌더링 된다. >> 불필요한 리렌더링은 컴포넌트 계층 구조가 복잡하고 데이터가 자주 변경될 때 발생할 수 있다. 불필요한 재평가를 방지해야 한다! ❗️React.memo()를 사용하면 된다! 컴포넌트 export 할 때, React.memo()를 사용해서 컴포넌트를 감싸서 내보낸다. 함수형 컴포넌트를 메모이제이션하여 이전에 전달된 props가 변경되지 않으면, 이전 결과를 재사용하기 때문이다. 더보기 🔥메모이제이션 컴.. 공감수 0 댓글수 0 2024. 1. 4.
forwardRef()와 useImperativeHandle() 🔥함수형 컴포넌트 기반으로 정리를 했습니다! 하위 컴포넌트 안에 있는 요소에 직접 접근하고 싶은데 컴포넌트에 ref 속성을 추가해 조작하려 하면 null 값을 참조하려 한다는 오류가 뜬다. => 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에서 ref 어트리뷰트를 사용할 수 없다. 그럼 ref를 통해 함수 컴포넌트를 직접 제어하려면 어떻게 해야하지? ❗️forwardRef()를 사용하면 된다. forwardRef()는 부모 컴포넌트에서 전달받은 ref를 자식 컴포넌트로 전달하는 역할을 한다. (부모 컴포넌트의 ref와 실제 사용할 자식 컴포넌트의 ref 연결) 자식 컴포넌트는 전달받은 ref를 HTML 요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해진다. 🌀ref Re.. 공감수 0 댓글수 0 2024. 1. 3.
Hooks의 규칙 📌 리액트 함수 리액트 컴포넌트를 생성하기 위해 사용되는 함수 이 함수는 JSX(JavaScript XML)를 반환하여 리액트 애플리케이션의 UI를 정의하고 렌더링하는 역할 리액트 함수는 주로 두 가지 형태 => 함수 컴포넌트, 클래스 컴포넌트 📌 리액트 컴포넌트 리액트 컴포넌트는 JSX를 반환한다. JSX는 React.createElement 호출로 변환되며, 이것이 리액트 컴포넌트의 템플릿이다. 함수 컴포넌트나 클래스 컴포넌트 내에서 JSX를 반환하면 해당 함수나 클래스는 리액트 컴포넌트로 간주된다. 📌 리액트 훅의 규칙 리액트 훅은 최상위 수준에서 호출되어야 한다. 함수 컴포넌트나 클래스 컴포넌트의 최상위 수준에서만 호출되어야 한다. 중첩 함수(useEffect 등), 블록 스코프(조건문, 루프 등.. 공감수 0 댓글수 0 2023. 12. 14.
리액트의 Context ➡️ Context API 리액트는 props를 관리하는데, props는 컴포넌트에 전달하는 데이터로 컴포넌트 구성을 하게 해주고 부모-자식 컴포넌트 간의 통신을 연결해 주는 역할을 해준다. 문제는 여러 개의 컴포넌트를 거쳐 데이터를 전달할 때 일어난다. state를 여러 컴포넌트를 통해 props로 전달하는 경우 App ➡️ Header ➡️ Navigation App에서 Login 정보를 Header에 props로 내려준다. Header에서 직접 사용하지 않고, Header 안에 있는 Navigation에 Login 정보를 props로 내려준다. Navigation에서 직접 사용한다. => Header는 그냥 데이터를 전달만 할 뿐 이렇게 단순하게 props를 내려줄 수 있다. 그러나 DOM 트리가 복잡할 경우 LoginFor.. 공감수 0 댓글수 0 2023. 12. 14.
리액트 주요 콘셉트 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하기 위한 선언적이고 효율적인 방법을 제공한다. 리액트는 컴포넌트 기반 아키텍처를 기반으로 하며, UI를 독립적인 작은 조각으로 분할하여 관리한다. 이러한 컴포넌트는 재사용 가능하며 각각의 독립성을 가지며 상태(State) 및 속성(Properties)을 통해 데이터를 관리한다. 컴포넌트(Component) 리액트 애플리케이션은 작은 조각으로 나누어진 컴포넌트로 이루어진다. 컴포넌트는 UI의 일부를 나타내며 독립적으로 작동하도록 설계되어 재사용성을 높인다. 가상 돔(Virtual DOM) 리액트는 가상 돔을 사용하여 실제 돔과 상호작용한다. 가상 돔은 메모리에 존재하는 가벼운 복사본으로서, 변경 사항을 더 효율적으로 감지하고 실제 돔에.. 공감수 0 댓글수 0 2023. 12. 13.
useState() vs useReducer() 📌 useState() state 관리 도구 단순 상태 업데이트, 복합적이지 않은 상태, 연결되지 않는 상태 간단한 컴포넌트나 단일 상태 변수를 다루기에 적합하다. 개별적인 상태를 다루기에 적합하고, 각 상태 변수는 독립적으로 동작한다. 단순한 상태 업데이트와 컴포넌트 간 연결이 적은 경우에 유용하다. 📌 useReducer() state 가공 최신 state 스냅샷, 복잡한 로직 주로 복잡한 상태 로직이나 여러 상태 간의 관계가 있는 경우에 유용하다. 복잡한 상태 업데이트 로직을 포함하거나 여러 상태를 동시에 업데이트할 때 적합하다. 연관된 상태 조각들로 구성된 상태 관련 데이터를 다루는 경우 사용한다. ex) 폼 인풋 state state 하나를 변경하는 여러 액션이 있는 경우(데이터 상태에 따라 분.. 공감수 0 댓글수 0 2023. 12. 13.
useReducer() 🔥함수형 컴포넌트 기반으로 정리를 했습니다! 상태 관리를 수행하기 위해 사용되는 Hook useState와 비슷하지만 좀 더 복잡한 상태 로직을 다룰 때 유용하다. 주로 여러 상태 값이 서로 연관되어 있는 경우나, 상태 전이 로직이 복잡한 경우에 활용된다. // 기본형 const [state, dispatch] = useReducer(reducer, initialState); reducer 함수는 현재 상태와 액션(상태를 업데이트하는 데 사용되는 정보를 가진 객체)을 받아서 새로운 상태를 반환한다. dispatch 함수에 상태 변경을 위한 액션을 전달하면 자동으로 reducer에 액션을 전달하고 실행한다. // 사용 예제 => 카운터 함수 import React, { useReducer } from 'r.. 공감수 0 댓글수 0 2023. 12. 13.
useEffect() 🔥함수형 컴포넌트 기반으로 정리를 했습니다! Side effects를 수행하기 위해 사용되는 Hook Side effects는 주로 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등과 같은 작업을 말한다. useEffect는 컴포넌트 렌더링 후에 실행되는데, 이는 렌더링 결과가 화면에 이미 반영된 후에 Side effects를 수행할 수 있게 해준다. useEffect는 컴포넌트가 렌더링될 때마다 실행되며, 컴포넌트 생명 주기 관련된 여러 시점에서 Side effects 를 실행할 수 있다. useEffect(() => { // Side effects를 수행하는 코드 // 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등 // clean-up 함수 (선택적) return () => { // c.. 공감수 0 댓글수 0 2023. 12. 13.
useRef() 🔥함수형 컴포넌트 기반으로 정리를 했습니다! ref는 다른 DOM 요소에 접근하고 조작할 수 있게 해준다. 리액트 16.3 버전 이상에서는 함수 컴포넌트에서 useRef 훅을 사용하여 ref를 생성할 수 있다. 리액트가 JSX 코드를 렌더링 할 때, ref 객체에는 실제 DOM 요소나 컴포넌트의 인스턴스가 저장된다. 저장된 값은 항상 객체이고, current 속성을 가지고 있다. current 속성은 ref가 연결된 실제 값을 갖는다. 어떤 HTML 요소에도 추가할 수 있는데, 입력 필드 내용을 가져오기 위해 주로 input에 많이 사용한다. import React, { useRef, useEffect } from 'react'; const MyComponent = () => { const myInput.. 공감수 0 댓글수 0 2023. 12. 6.
Portal DOM 트리의 특정 위치에 컴포넌트를 렌더링하기 위한 API React 애플리케이션에서 모든 컴포넌트는 동일한 부모 컴포넌트 내에서 렌더링되는데, 특정 UI 요소를 다른 DOM 요소의 위치로 렌더링해야 하는 경우엔 ReactDOM.createPortal을 사용한다. (특히 모달, 툴팁, 드롭다운 메뉴 등의 UI 요소를 더 상위 수준의 DOM 노드에 렌더링하려는 경우에 효과적이다.) Portal은 React 컴포넌트 트리를 따라가는 것이 아니라 다른 DOM 위치로 React 컴포넌트를 렌더링하는 데 사용되기 때문에 react-dom에서 제공하는 createPortal을 이용해 만든다. createPortal 함수는 첫 번째 매개변수로 렌더링할 React 요소와 두 번째 매개변수로 해당 요소를 삽입할 DOM.. 공감수 0 댓글수 0 2023. 12. 6.
CSS 스타일 설정 방법 📌 인라인 스타일 /* 일반 속성 */ /* 하이픈(-)으로 연결된 속성 */ /* 조건에 따른 스타일 적용 */ const [isValid, setIsValid] = useState(false); 📌 클래스 const [isValid, setIsValid] = useState(false); 📌 CSS 모듈 방식 사용 CSS를 사용할 때 로컬 스코프에 해당하는 독립적인 모듈로 만들어 사용하는 방식 스타일을 컴포넌트와 분리하여 관리할 때 주로 사용한다. 각 컴포넌트에 대해 별도의 CSS 모듈 파일을 만들고, 해당 모듈 파일 내에서 정의된 클래스 이름은 해당 컴포넌트에만 적용된다. 각 컴포넌트는 독립적인 스타일을 가지며, 클래스 이름 충돌을 방지하면서도 컴포넌트 스코프 내에서 스타일을 안전하게 유지할 수 있.. 공감수 0 댓글수 0 2023. 12. 6.
react와 react-dom과 react-native 📌 react react는 라이브러리다. react 컴포넌트를 정의하고 관리하는 데 사용된다. react는 react 컴포넌트 클래스 및 함수, JSX 지원, 가상 DOM (Virtual DOM), 라이프사이클 메서드, 상태 관리 등의 기능들을 제공한다. import React from 'react'; class MyComponent extends React.Component { // 컴포넌트 로직 및 렌더링 메서드 } 📌 react-dom 웹 애플리케이션 또는 웹 앱을 개발할 때 사용되는 React의 확장 react-dom은 react로 만들어진 로직들과 기능들을 실제 브라우저에 렌더링해준다. (즉, react는 가상 DOM을 사용하여 메모리에 렌더링된 컴포넌트 트리를 관리하고, 이를 실제 DOM에 반.. 공감수 0 댓글수 0 2023. 12. 6.
조건부 렌더링 📌 삼항연산자 사용하여 조건부 렌더링 조건 ? 참일 경우 실행할 내용 : 거짓일 경우 실행할 내용; { // 조건 itemList.length === 0 ? ( // 참일 경우 실행할 내용 목록이 없습니다. ) : ( // 거짓일 경우 실행할 내용 itemList.map((item) => ( )) ) } 📌 AND 연산자(&&) 사용하여 조건부 렌더링 두 조건 모두 참인 경우 참 조건을 만족할 때만 내용을 보여 주고, 만족하지 않을 때 아무것도 랜더링되지 않아야 하는 상황에서 사용한다. { itemList.length === 0 && ( 목록이 없습니다. ) } { itemList.length > 0 && itemList.map((item) => ( )) } 조건이 참(Truthy)일 때, 오른쪽의 표현.. 공감수 0 댓글수 0 2023. 12. 5.
배열 데이터를 렌더링할 때 key를 꼭 써야할까? 📌 key를 추가하는 이유 key는 각 항목을 구별할 수 있도록 도와주는 유일한 식별자이다. 리액트가 배열 목록을 효율적으로 업데이트하고, 순서가 변경되어도 정확하게 변경된 요소만 업데이트하는 데 도움을 준다. (key를 기준으로 변경된 요소만 업데이트하고 나머지는 그대로 유지한다.) ➡️ key가 없으면 배열 아이템들을 식별하지 못 해서, 다 다시 그려준다. ➡️ key가 있으면 변경된 것만 새로운 것만 그려준다. ➡️ key가 없으면 배열의 순서를 기준으로 각 요소를 식별한다. ➡️ key가 없으면 리액트는 순서에 의존하여 모든 요소를 업데이트한다. 📌 테스트 const MyComponent = () => { const items = [ { id: 1, text: 'Item 1' }, { id: 2,.. 공감수 0 댓글수 0 2023. 12. 5.
상태가 없는 컴포넌트(Stateless)와 상태가 있는 컴포넌트(Statefull) 제어된 컴포넌트 vs 제어되지 않은 컴포넌트 프레젠테이셔널 컴포넌트 vs 상태 유지 컴포넌트 dumb vs smart Stateless vs Statefull 📌 상태가 없는 컴포넌트 (Stateless) const StatelessComponent = (props) => { return {props.message}; }; 상태(state)를 갖지 않는 컴포넌트 props를 받아 렌더링하고 UI를 표시하는 역할 렌더링만 담당하므로 생명주기 메서드나 상태 변경에 따른 부가적인 작업을 수행하지 않는다. 리액트 훅을 사용하지 않는다. 단순하고 가벼워서 성능이 좋다. 📌 상태가 있는 컴포넌트 (Statefull) import React, { useState, useEffect } from 'react'; con.. 공감수 0 댓글수 0 2023. 12. 5.
양방향 바인딩 리액트의 양방향 바인딩(Two-Way Binding)은 부모 컴포넌트의 상태가 자식 컴포넌트의 props로 전달되는 동시에 자식 컴포넌트에서 변경된 값이 부모 컴포넌트의 상태에도 즉시 반영되는 메커니즘을 의미한다. 주로 사용자 인터페이스 요소(입력 필드)의 값과 상태를 동기화할 때 유용하다. 📌 state를 이용한 양방향 바인딩 부모 컴포넌트가 inputValue라는 상태를 가지고 있고, 이 상태를 자식 컴포넌트에 value의 props으로 전달한다. 자식 컴포넌트에서는 입력 필드의 값이 변경될 때마다 handleChange 함수를 통해 onInputChange 콜백을 호출하여 부모의 상태를 갱신한다. import React, { useState } from 'react'; // 부모 컴포넌트 funct.. 공감수 0 댓글수 0 2023. 12. 5.
useState() 시작하기 전... HOOK React 버전 16.8부터 도입된 기능 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능 등을 사용할 수 있도록 하는 기능 훅은 use로 시작한다. 훅들은 리액트 컴포넌트 함수 안에서 호출되어야 한다. 🔥함수형 컴포넌트 기반으로 정리를 했습니다! useState 훅을 이용하면 컴포넌트에서 상태를 추가하고 관리할 수 있다. 컴포넌트 내에서 변수를 선언하면, 해당 변수의 값이 변경되어도 React는 컴포넌트를 다시 렌더링하지 않는다. React는 컴포넌트의 상태나 props가 변경되었을 때에만 다시 렌더링을 수행한다. 이것이 React의 "재평가" 개념이다. useState를 사용하여 상태를 선언하면, React가 해당 상태를 추적하고, 상태가 변경될 때마.. 공감수 0 댓글수 0 2023. 12. 5.
이벤트 핸들링 리액트 모든 이벤트 on으로 시작한다. onClick={clickHandler} 📌 이벤트 리스너 속성에 함수 전달하는 방법 onClick 같은 이벤트 리스너 프로퍼티는 이벤트가 발생했을 때 실행해야 하는 함수의 ‘포인터’를 값으로 전달해야 한다. 그래야 이벤트가 발생했을 때 사용자를 대신하여 리액트가 함수를 실행한다. 📌 부모 컴포넌트로 이벤트 전달하는 방법 프로퍼티를 통해 함수를 받아들이고, 이를 자식 컴포넌트 내부로부터 호출하고, 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거 할 수 있다. 자바스크립트에서 함수는 단순한 객에(일반 값)이므로 프로퍼티를 통해 값을 자식 컴포넌트에 전달할 수 있다. 그리고 (전달받은) 자식 컴포넌트가 해당 함수를 호출하면 함수가 실행된다. 이런 식으.. 공감수 0 댓글수 0 2023. 12. 4.
JSX를 자바스크립트로 작성해보기 import Expenses from "./components/Expenses"; const expenses = [ {}, {} ]; const Expense = (props) => { return ( 안녕하세요. ); } 위 코드를 순수 자바스크립트로 작성한다면 import React from 'react'; const Expense = (props) => { return React.createElement( ‘div’, {}, React.createElement(‘h2’, {}, ‘안녕하세요.’), React.createElement(Expenses, { items: expenses }) ); 옛날엔 .createElement 메서드를 사용하려면 모든 페이지에서 react를 임포트 해줘야 했지만 지금.. 공감수 0 댓글수 0 2023. 11. 29.
컴포넌트 작성 방식 (함수형? 화살표 함수?) 함수형 컴포넌트 방식 함수형 컴포넌트를 많이 쓴다. 기존의 자바스크립트 문법에 익숙한 개발자들이 쉽게 적응할 수 있는 방식이다. function Expenses(props) { return ( {props.items.map(item => ( ))} ); } 화살표 함수 표현식 화살표 함수는 간결하고 직관적인 문법을 가지고 있어 가독성이 좋고, this 바인딩에 대한 동작이 다르기 때문에 몇 가지 상황에서 유용할 수 있다. 개인의 취향과 프로젝트의 코드 스타일에 따라 선택하면 된다. const Expenses = (props) => { return ( {props.items.map(item => ( ))} ); } 공감수 0 댓글수 0 2023. 11. 29.
React에서 페이지 전환 시 <a> 태그 사용하지 않는 이유 + 페이지 전환 방법 Next.js 강의 중 라우팅 챕터를 보는데... Next.js에서 태그를 이용해서 을 만들었더니 태그를 이용해서 페이지를 이동하지 말라고 ESLint가 떴다. React에서 태그를 이용해 페이지 이동하지 않는 이유와 같다고 했다. 생각해 보니 정확한 이유를 모르고 있었다. 막연하게 react-router-dom을 이용해서 컴포넌트를 이용해 페이지 이동을 구현했었다. 창피했다. 제대로 쓰기 위해 열심히 찾아보았다. ⭐️ 페이지 전환 시 태그를 사용하지 않는 이유는? 페이지 전환의 SPA 장점 상실 React로 만들어진 앱은 주로 SPA 방식으로 개발되었다. 브라우저의 페이지 전환없이 동적으로 콘텐츠를 보여준다. 태그를 사용하면 전체 페이지가 새로고침되므로 SPA 장점 사라진다. React Router 기.. 공감수 0 댓글수 0 2023. 11. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.