반응형 📁 [4] 개발자 정보 & 코드 노트/REACT12 📘 리액트 강의 12편 - 성능 최적화 전략 (React.memo, useMemo, useCallback) React는 기본적으로 렌더링이 매우 빠릅니다. 하지만 컴포넌트가 많아지고, 상태 변화가 많아지면 불필요한 렌더링이 발생할 수 있습니다.이 강의에서는 리액트 성능 최적화를 위한 3가지 핵심 도구를 배웁니다.1. 불필요한 렌더링이란? 부모 컴포넌트가 렌더링되면 기본적으로 자식도 함께 렌더링됩니다.→ 데이터가 바뀌지 않아도 다시 그려지면 성능 낭비 발생 😢2. React.memo - 컴포넌트 메모이제이션React.memo는 props가 바뀌지 않았다면 리렌더링을 막아주는 고차 컴포넌트입니다.const Child = React.memo(({ name }) => { console.log("Child 렌더링"); return {name};});3. useCallback - 함수를 메모이제이션useCallb.. 2025. 4. 12. 📘 리액트 강의 11편 - Axios로 서버와 통신하고 API 연동하기 리액트 앱은 보통 서버와 REST API로 통신하며 데이터를 주고받습니다.이번 시간에는 axios 라이브러리를 활용하여 서버에서 데이터를 불러오고, 상태에 반영하는 실전 API 연동 방법을 배웁니다.1. Axios란?fetch보다 간단하고 직관적인 HTTP 요청 라이브러리JSON 자동 처리, 요청/응답 인터셉터, 에러 처리 등에 강함2. 설치하기npm install axios3. 예제: 영화 API 호출 앱우리는 무료 샘플 API인 OMDb API를 활용해영화 검색 기능을 만들어 볼게요.👉 OMDb API 키: https://www.omdbapi.com/?apikey=7035c60c&s=검색어4. 코드 작성📄 App.jsimport { useState, useEffect } from "react";i.. 2025. 4. 12. 📘 리액트 강의 10편 - Redux Toolkit으로 전역 상태 관리하기 리액트의 useState, useContext만으로도 상태 관리는 가능하지만,규모가 커지면 복잡도도 같이 폭발합니다.그래서 실무에서는 전역 상태 관리 도구인 Redux를 많이 사용하며,최근에는 Redux Toolkit이 표준처럼 사용되고 있습니다.1. Redux Toolkit이란?Redux를 더 간결하고 쉽게 사용하도록 만든 공식 툴킷store, slice, dispatch 개념을 중심으로 구성복잡했던 boilerplate 코드들을 최소화2. 설치하기npm install @reduxjs/toolkit react-redux3. 폴더 구조 예시src/├── app/│ └── store.js├── features/│ └── counter/│ ├── counterSlice.js├── App.j.. 2025. 4. 12. 📘 리액트 강의 9편 - React Router로 페이지 전환 구현하기 리액트 앱은 SPA(Single Page Application) 구조입니다.하지만 실제로는 여러 페이지처럼 보이게 만들 수 있습니다.이를 가능하게 해주는 도구가 바로 React Router입니다.1. React Router란?URL에 따라 보여줄 컴포넌트를 바꿔주는 라이브러리페이지 새로고침 없이 화면만 전환 가능 (SPA의 핵심)2. 설치하기npm install react-router-dom버전 확인은 package.json에서 "react-router-dom": "^6" 이상이면 OK3. 기본 구성 요소 (v6 기준)구성요소 역할라우팅 기능 활성화라우트 목록경로별 컴포넌트 지정페이지 이동 (a 태그 대신 사용)useParams()URL 파라미터 읽기4. 예제: 게시글 목록 & 상세보기 라우팅📄 App.. 2025. 4. 12. 📘 리액트 강의 8편 - Context API로 전역 상태 공유하기 컴포넌트가 깊어지면 props 전달이 너무 복잡해질 수 있습니다.이 문제를 해결하기 위해 React는 Context API라는 기능을 제공합니다.이번 시간에는 Context를 이용해 전역 상태를 만들고, props drilling 없이 데이터 전달하는 방법을 배웁니다.1. props drilling 문제란? user라는 상태를 가장 하위의 ProfileName까지 전달하려면 매 단계마다 props로 넘겨야 함 → 불편함💦이걸 해결하는 게 바로 Context API2. Context API 기본 흐름createContext()로 Context 생성Provider로 상태를 공유할 범위 설정useContext()로 값 받아오기3. 예제: 다크모드 전역 상태 관리📄 ThemeC.. 2025. 4. 12. 📘 리액트 강의 7편 - 커스텀 훅과 성능 최적화 (useMemo, useCallback) 리액트에서 재사용 가능한 로직은 어떻게 만들까요?그리고 불필요한 렌더링을 막으려면 어떻게 해야 할까요?이번 강의에서는 **커스텀 훅(Custom Hook)**과 성능 최적화에 사용하는 훅들을 배웁니다.1. 커스텀 훅(Custom Hook)이란?use로 시작하는 함수로, 여러 컴포넌트에서 공통으로 쓰는 로직을 분리한 것기존 훅들을 조합해서 새 훅을 만드는 느낌2. 예제: 입력 상태 관리 훅 만들기📄 useInput.jsimport { useState } from "react";function useInput(initialValue) { const [value, setValue] = useState(initialValue); const onChange = (e) => setValue(e.target.v.. 2025. 4. 12. 📘 리액트 강의 6편 - useEffect로 외부 데이터 가져오기 이번 강의에서는 리액트 컴포넌트에서 외부 API를 호출하고 데이터를 가져오는 방법을 배웁니다.React에서는 이런 "사이드 이펙트(side effect)" 작업을 useEffect라는 훅으로 처리합니다.1. useEffect란?컴포넌트가 렌더링된 후 실행되는 함수대표적인 사용 사례:API 요청타이머 설정구독/클린업 작업 등기본 형태useEffect(() => { // 실행할 작업}, []);[]는 의존성 배열이며, 비워두면 처음 렌더링 시 1회만 실행됩니다.2. API 호출을 위한 준비우리는 fetch 또는 axios를 사용할 수 있습니다.이 예제에서는 기본 내장 fetch를 사용합니다.3. 예제: JSONPlaceholder에서 게시글 불러오기📄 App.jsimport { useState, useE.. 2025. 4. 12. 📘 리액트 강의 5편 - 조건부 렌더링과 리스트 출력 이번 강의에서는 map()을 이용한 반복 렌더링과 조건부 렌더링을 다룹니다.리액트에서 데이터를 배열로 관리할 때, 이를 화면에 출력하는 방법은 꼭 알아야 합니다.1. 리스트 렌더링: map() 함수배열의 요소들을 컴포넌트로 바꿔주는 대표적인 방법은 map()입니다.const fruits = ["사과", "바나나", "포도"];return ( {fruits.map((fruit, index) => ( {fruit} ))} );✅ 주의: key 속성리액트는 리스트 요소에 key를 꼭 요구합니다.key는 각 요소를 고유하게 식별할 수 있는 값 (보통 id, 아니면 index)2. 조건부 렌더링조건에 따라 화면에 요소를 보이거나 숨길 수 있습니다.기본 형태{조건 && }{조건 ? : }.. 2025. 4. 12. 📘 리액트 강의 4편 - Props vs State 그리고 컴포넌트 구조화 리액트에서 규모 있는 앱을 만들기 위해서는 컴포넌트를 잘게 나누고, 데이터 흐름을 명확히 해야 합니다.이번 편에서는 props와 state의 차이를 명확하게 이해하고, 컴포넌트 분리를 통해 코드 구조를 깔끔하게 만드는 방법을 알아봅니다.1. Props vs State 비교항목 props state역할부모 → 자식 전달용 데이터컴포넌트 자체의 내부 상태변경 가능 여부읽기 전용 (변경 불가)변경 가능 (useState)누가 관리?부모 컴포넌트자신이 관리2. 컴포넌트 구조화란?초기에는 모든 코드를 App.js에 작성해도 되지만,프로젝트가 커질수록 컴포넌트를 나눠야 유지보수에 유리합니다.하나의 파일 = 하나의 역할3. 예제: 게시글 리스트 앱 구조화💡 목표전체 게시판: App.js게시글 리스트: PostLis.. 2025. 4. 12. 📘 리액트 강의 3편 - 이벤트 처리와 상태 관리 (useState) 이제부터 리액트의 진짜 재미를 느낄 수 있는 부분!React는 단순히 화면만 그리는 게 아니라, **상태(state)**를 가지고 UI를 동적으로 업데이트할 수 있습니다.이번 시간에는 React의 상태관리 훅인 useState와 이벤트 처리 방식을 익혀봅니다.1. 리액트에서의 이벤트 처리리액트는 DOM 이벤트를 처리할 수 있게 도와주는 방식이 존재합니다. 다만 HTML과는 약간 다릅니다.기본 사용법클릭이벤트 이름은 camelCase(onclick → onClick)값으로는 문자열이 아닌 함수를 전달function handleClick() { alert('버튼이 클릭되었습니다!');}2. useState 훅으로 상태 관리하기상태는 컴포넌트 안에서 변화하는 값입니다.React에서는 useState를 사용해.. 2025. 4. 12. 📘 리액트 강의 2편 - JSX 문법과 컴포넌트 기초 리액트에서는 HTML을 그대로 쓰는 것이 아니라, JSX라는 특수한 문법을 사용합니다. JSX는 JavaScript와 HTML을 섞어 쓸 수 있는 문법으로, 리액트 컴포넌트의 핵심입니다. 이 강의에서는 JSX 문법의 기본 규칙과 컴포넌트의 개념, 그리고 props를 통한 데이터 전달 방법을 배웁니다.1. JSX란?JSX는 JavaScript 문법 확장으로, XML처럼 생긴 문법입니다. HTML과 매우 유사하지만 몇 가지 중요한 차이점이 있습니다:JSX 주요 규칙태그는 꼭 닫아야 한다→ , 하나의 최상위 태그로 감싸야 한다→ ...class 대신 className 사용JS 표현식은 {} 중괄호로 묶기const name = "React";return Hello, {name}!;2. 컴포넌트란?React의 U.. 2025. 4. 12. 📘 리액트 강의 1편 - 개발 환경 구축과 Hello React 리액트(React)를 시작하기 위해 가장 먼저 해야 할 일은 개발 환경을 구성하는 것입니다. 이 강의에서는 Node.js 설치부터 Create React App(CRA)을 이용해 첫 번째 프로젝트를 생성하고, "Hello React"를 출력해보는 과정을 다룹니다.1. Node.js 설치React는 Node.js 환경에서 동작하기 때문에, 먼저 Node.js를 설치해야 합니다.Node.js 공식 사이트에서 LTS 버전 설치설치 완료 후, 아래 명령어로 버전 확인:node -vnpm -v2. VS Code 설치 (권장)리액트 개발을 위한 추천 에디터는 VS Code입니다.React 관련 확장: ESLint, Prettier, React Developer Tools 등 설치3. Create React App으.. 2025. 4. 12. 이전 1 다음 반응형
