odada

useReduceruseReducer 란?useReducer 는 useState 보다 더 다양한 컴포넌트 상태를 관리하는 Hook 입니다. useState 는 컴포넌트 상태를 관리하는 가장 기본적인 Hook 이지만, useReducer 는 복잡한 상태 로직을 다루기에 더 적합합니다.컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있고, 상태 로직을 컴포넌트 바깥으로 빼내어 재사용할 수 있습니다.useReducer 사용법useReducer 는 다음과 같이 사용합니다.const [state, dispatch] = useReducer(reducer, initialState)state : 현재 상태dispatch : 액션을 발생시키는 함수, 액션을 발생시키면 리듀서 함수가 호출되어 상태가 변경됩니다.reducer..

최적화리액트에서의 최적화 기법은 불필요한 연산을 줄여 성능을 향상시키는 것입니다.리액트 공식 문서에서는 성능 최적화를 위한 방법을 다음과 같이 소개합니다.최적화 방법코드, 폰트, 이미지 등의 리소스를 압축합니다.메모이제이션을 이용하여 불필요한 연산을 줄입니다.메모이제이션메모이제이션이란 연산의 결과를 기억했다가 필요할 때 사용함으로써 불필요한 연산을 방지하는 것입니다.useMemo : 함수의 불필요한 재실행을 방지합니다.React.memo : 컴포넌트의 불필요한 리렌더링을 방지합니다.useCallback : 함수의 불필요한 재생성을 방지합니다.useMemo 사용하기문법 : useMemo(() => 연산 결과, [의존성 배열])목적: 값을 기억하고, 성능을 최적화합니다.사용 시점: 계산 비용이 높은 연산을 ..

할 일 관리 앱 만들기1. 컴포넌트 구조 설계하기- App 컴포넌트 만들기// src/App.jsimport React from 'react'import TodoHd from './TodoHd'import TodoEditor from './component/TodoEditor'import TodoList from './component/TodoList'export default function App() { return ( )}- Header 컴포넌트 만들기// src/components/TodoHd.jsimport React from 'react'export default function TodoHd..

라이프 사이클 (생명주기) 이해하기 React에서 컴포넌트의 생명주기를 관리하는 것은 앱의 성능과 유지보수성에 중요한 영향을 미칩니다. 특히, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 이러한 관리 작업을 수행합니다. - 예제로 알아보는 라이프 사이클 데이터를 불러와 화면에 표시하는 간단한 뉴스 목록 컴포넌트를 생각해볼 수 있습니다. 이 컴포넌트는 useEffect 훅을 사용해 컴포넌트가 마운트될 때 뉴스 API에서 데이터를 한 번만 불러오고, 이 데이터를 컴포넌트의 상태로 저장하여 화면에 뉴스 목록을 렌더링합니다. 만약 사용자가 특정 카테고리를 선택하면, 해당 카테고리에 맞는 뉴스 데이터를 다시 불러와 업데이트할 수 있습니다. 이렇게 useEffect를 사용하면 API 호출 타이밍을 정확히 ..

카운터 앱 만들기 리액트를 이용한 숫자를 증가시키거나 감소시키는 앱을 만들어보자. 1. 프로젝트 생성 npx create-react-app counter-app cd counter-app npm start 2. 컴포넌트(Components) 생성 src 디렉토리에 Viewer.js 파일을 생성한다. // src/Viewer.js import React from 'react' function Viewer() { return ( 0 ) } export default Viewer src 디렉토리에 Counter.js 파일을 생성한다. // src/Counter.js import React from 'react' function Counter() { return ( + - ) } e..

리액트 기본기능 첫 컴포넌트 만들기 App.js 파일에 Header, Body, Footer 컴포넌트를 만들어보자. import React from 'react' const Header = () => { return ( Header ) } const Body = () => { return ( Body ) } const Footer = () => { return ( Footer ) } function App() { return ( ) } export default App 컴포넌트 분리하기 Header, Body, Footer 컴포넌트를 따로 파일로 분리해보자. // Header.js import React from 'react' const Header = () => { retu..

비동기 처리 비동기 처리란, 작업을 동시에 처리하는 것을 말한다. 자바스크립트는 싱글 스레드 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있다. 하지만, 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다. 동기와 비동기 동기처리의 예: 은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것 비동기처리의 예: 커피 주문 시 앞번호가 먼저 나오는 것, 동시에 처리되는 것 - 동기 처리 동기 처리란, 작업을 순차적으로 처리하는 것을 말한다. 자바스크립트 코드는 기본적으로 동기적으로 처리된다. 동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다. 하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 ..

gitingnore 파일 만들기 gitignore 파일은 git으로 관리하지 않을 파일을 지정하는 파일이다. gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일 생성 gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일의 이름은 .gitignore이다. gitignore 파일 작성 # 폴더명/ : 폴더명의 모든 파일 무시 css/ # 파일명 : 파일명의 파일 무시 comm.css comm.css.map #폴더명/파일명 폴더명/파일명 # 확장자가 .txt인 파일 무시 *.txt # 윗 라인에서 확장자가 .txt인 파일은 무시하게 했지만 lib.a는 무시하지 않는다. !lib.txt gitignore 파일 적용이 안될 때 ign..

Parallax Scrolling (CSS, JS, AOS, ScrollMagic, GSAP) 패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것 레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법 게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용 javascript, css, 라이브러리 등을 이용하여 구현 CSS를 이용한 패럴랙스 스크롤링 css perspective 속성을 이용한 패럴랙스 스크롤링 mdn 해당 요소의 z = 0 평면과 사용자 사이의 거리 transform 효과를 주고자 하는 부모 요소에 적용 perspective에 따른 변형 효과 perspective: 100px; => 100px만큼 멀어져 보임 perspective가 ..

flexbox로 레이아웃 만들기 flexbox란? flexbox는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. Flexbox는 여러 요소들 사이의 공간 배분과 정렬 기능을 제공하여, 강력한 분산형 레이아웃을 제공합니다. flexbox의 구성 flex container: flexbox를 적용할 요소 flex item: flex container의 자식 요소 flexbox layout 만들기 1. layout1 - 스크롤 없는 100% 높이의 레이아웃 header main aside footer /* css */ :root { --hdH: 70px; --ftH: 70px; } #wrap { max-width: 1280px; margin: 0 auto; ..