본문 바로가기

Language/React

 (22)
📘React 흐름 ✅ React의 흐름도 (전체 과정)React 앱은 index.html 안의 하나만 존재main.jsx(또는 index.js) 에서ReactDOM.createRoot(document.getElementById('root')).render()로App 컴포넌트를 root에 렌더링✅ 컴포넌트 단위 구조React는 화면을 컴포넌트 (Component)라는 작은 단위로 나눈다.function App() { return ( ) }App -> Header, Main,Footer 처럼 트리 구조로 연결 된다.✅ 데이터(State) 흐름React는 단방향 데이터 흐름을 가진다.부모->자식 으로 props 전달컴포넌트 내부에서 useState 등으로 상태를 ..
📘React 실전 많이 사용되는것들 정리 ✅ 상태관리useState, useRedecer 로컬 상태 관리useContext + Context API 전역 상태 공유Redux / Zustand / Recoil 같은 외부 상태 관리 라이브러리 사용로그인 상태, 다크모드, 사용자 정보 같은 전역 데이터 관리 ✅ 데이터 통신fetch, axios API 호출React Query(TanStack Query) 서버 상태 관리, 캐싱, 자동 리페치Supabase / Firebase 같은 BaaS와 연결게시판 글 목록 불러오기, 무한 스크롤, 로딩/에러 처리 ✅ 라우팅React Router 페이지 이동, 동적 라우팅, URL 파라미터 처리useNavigate, useParams,Outlet 등/post/123 같은 상세 페이지 구현 ✅ 폼 처리react-ho..
📘 번들링(Bundling) ✅ 번들링이란?웹 개발에서 아주 중요한 개념이다.여러 개의 파일(HTML,CSS,Js,이미지 등)을 묶어서 브라우저가 이해하고 빠르게 불러올 수 있는 형태로 합치는 과정이다.✅ 번들링이 필요한 이유1. 파일이 너무 많으면 느려짐브라우저는 각 파일마다 요청(HTTP Request)을 보내는데, 파일ㅇ ㅣ많을수록 요청 수도 늘어나고, 속도도 느려진다. 2. 코드 최적화 필요개발용 코드는 보통 들여쓰기, 주석, 나누어진 모듈 등으로 구조화 되어 있다.하지만 브라우저에는 이게 불필요하니, 압축(minify)하고 필요 없는 코드(Tree-shaking)를 제거 한다. 3. 브라우저가 최신 문법을 모두 이해 못함최신 JavaScript(Es6+)를 쓰더라도 모든 브라우저가 지원하지 않을 수 있어서, 구형 브라우저도..
📘React Redux 개념 다시잡기 Redux 개념 다시잡기 ✅ Redux가 왜 필요할까?React 컴포넌트들이 많아지면 상태(State)관리가 복잡해진다.예: 여러 컴포넌트에서 같은 데이터(로그인 정보, 장바구니)를 쓸 떄 props drilling(부모 -> 자식 계속 전달) 문제 발생Redux는 중앙 저장소(Store)를 만들어 모든 컴포넌트가 공유하도록 도와준다.✅ Redux의 핵심 3요소Store (저장소)앱의 상태(State)를 한 곳에 모아놓은 공간 Action (액션)상태 변경을 요청하는 객체최소 구조 { type: "ACTION_NAME", payload:값 } Reducer(리듀서)액션을 받아서 새로운 상태를 만들어 반환state ={...} action.type에 따라 변경✅ 기본 흐름1. UI 에서 Action 발생 ..
📘 React의 중급 문제 1. React에서 조건부 렌더링을 구현하는 방법을 3가지 이상 적어보세요.if ,삼항 연산자, 논리연산자 2. 아래 코드가 동작하지 않는 이유와 해결 방법을 설명하세요. function Counter() { let count = 0; function handleClick() { count++; console.log(count); } return ( {count} 증가 ); } count가 state가 아니어서 값이 변경되어도 화면이 다시 렌더링 되지 않음해결방법은 useState를 사용function Counter() { const [count, setCount] = useState(0); function handleCli..
📘 React의 기초 문제 1. React에서 컴포넌트를 만드는 방법 2가지를 말하고, 각각의 차이를 설명하세요. class는 부모에게로 부터 받은것을 this로 받아올 수 있으며 function은 props로 받는다.class는 생명주기 메서드 (componentDidMount, compinentDidUpdate등)를 사용 가능function은 useState, useEffect 같은 훅을 사용해 상태관리 및 생명주기 기능 구현 2. props와 state의 차이점을 설명하세요. state는 상태를 말하는것 즉, 저장소 props는 부모에게로부터 받은 변수를 사용할 수 있게 해주는 변수(객체)이다. 3. React에서 JSX란 무엇이며, JSX를 사용하지 않고 컴포넌트를 만들 수 있는 방법은 무엇인가요? JSX란, js에서 ht..
📘React.createElement ✅React.createElement란?React 엘리먼트를 만드는 함수JSX가 실제로 변환되는 "진짜 함수"UI의 모양을 자바스크립트 객체 형태로 설명 하는 역할 Hello이 코드는 브라우저가 바로 이해하는 HTML이 아니라, React.createElement로 변환돼서 실행된다. ✅변환예시✅JSXconst element = h1 className="title">Helloh1>; ✅ Babel이 변환한 코드const element = React.createElement( 'h1', // 태그 이름 { className: 'title' }, // 속성(props) 'Hello' // 자식(children)); ✅ 동작 방식React.createElement는 이런 React 엘리먼트 객체를 반..
📘React 이전 상태 (previous state) prev는 공식 용어는 아니지만, 일반적으로 아래처럼 상태 업데이트 함수 안에서 전달되는 이전 값을 의미한다. setState(prev => 새로운 값) setState에 함수를 전달하면, 리액트는 현재 상태 값을 prev 인자로 넘겨준다.이렇게 하면 현재 상태를 기준으로 안정적으로 업데이트 할 수 있다. 숫자 증가 예시import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 초기값 0 const increase = () => { setCount(prev => prev + 1); // set count에 이전 값을 불러와서 이전값 + 1을 해준다. }; return ( di..

티스토리툴바