반응형 React20 React 개발 주의점 요약 1️⃣ React를 “UI 라이브러리”로 다시 이해하기핵심 관점React는 MVC / MVVM 프레임워크가 아님React의 책임은 딱 하나:상태(state) → UI를 어떻게 그릴지 선언하는 것👉데이터 fetching ❌상태 저장 전략 ❌라우팅 ❌이건 전부 React 바깥의 문제(그래서 Next.js, React Query, Zustand 같은 도구가 붙음)2️⃣ React의 렌더링 모델 (중급 핵심)React 렌더링 = 2단계Render PhaseJSX → Virtual DOM 계산순수 계산 단계부작용 ❌Commit Phase실제 DOM 반영useEffect 실행브라우저 페인트👉 이걸 이해해야:왜 렌더링이 여러 번 일어나는지왜 useEffect에 로직 넣으면 문제가 되는지왜 성능 최적화가 필요한지 .. 2026. 2. 9. React 개념 정리 🌱 React 입문자용 정리 1️⃣ React는 뭐 하는 애야?React 한 줄 요약화면(UI)을 만들기 위한 JavaScript 라이브러리버튼, 목록, 카드 같은 화면 조각을 컴포넌트로 만들어서 조립함👉 “HTML + JS를 더 편하게, 체계적으로 관리하게 해주는 도구” ⭐⭐⭐ React 개요정의: JavaScript 기반 Front-End UI 프레임워크특징UI를 컴포넌트 단위로 구성 → 재사용성 ↑SPA(Single Page Application) 방식하나의 DOM 사용 → 변경된 부분만 업데이트대규모·동적 데이터 앱에 유리 왜 React를 쓰냐면화면이 자주 바뀌는 서비스에 강함댓글좋아요실시간 데이터화면을 재사용 가능한 단위로 쪼갤 수 있음코드가 길어져도 구조를 유지하기 쉬움2️⃣ SPA란 뭐.. 2026. 2. 9. KOSA React 프론트기반 개발 과정(재직자) - 강추! 회사에서 보내주면 가세요 국가인적자원개발컨소시엄 SW현장전문인력양성사업 운영으로 마이크로서비스아키텍처 React 프론트기반 개발 과정(오프라인)을 수료했다. https://www.sw.or.kr/site/sw/edu/selectEduView.do?eduNo=2041 한국인공지능·소프트웨어산업협회AI·SW 산업을 이끄는 대표 협회입니다. 주요 사업, 인재지원, 협회소식 등을 확인하세요.www.sw.or.kr 한국인공지능 소프트웨어 산업 협회 KOSA에서 진행하는 교육으로 재직자와 구직자를 위해 다양한 교육을 진행하고 있었다. 나는 회사에서 이런 교육 있는데 가고싶은사람 가라...그래서 지원하게 되었다... 중소기업이라 좋은 점은 이런 나라(?)에서 하는 교육이 공짜라는 점이다...ㅠ 나는 풀스택 자바 개발자이므로 React의 동.. 2026. 2. 5. [26.02.04] React 재직자 교육 5 - 배포방법, 도커 Docker 컨테이너 빌드 배포 배포방식 node.js 서버 배포 ssr이 기본이다csr로 바꿔서 빌드 해야되는 경우 있다. 하나라도 오류가 있으면 빌드가 안된다. package.json에 script에 있는npm run build명령어로 빌드를 한다.기본은 ssr로 빌드이다. 빌드에 성공하면 .next폴더에 빌드가 된다. 다음 디렉토리와 파일을 Node.js가 설치 된 운영 서버의 임의 폴더로 옮기기[docker 폴더]– .next 폴더– public 폴더– package.json– package-lock.json 서버에 올리고 npm install을 한번 해줘야된다.modules는 사이즈가 크니 서버에 올리고 해준다. 빌드를 다 하고 빌드 잘됐는지 보고싶다. npm run start를 해주면 빌드 된걸로 서버를 띄운다.속도가.. 2026. 2. 4. [26.02.04] React 재직자 교육 3 - Spring Rest API와 연결 후 React에서 데이터 쓰기 VSCode로 자바랑 스프링 부트 확장 프로그램을 설치하고 스프링 서버를 띄웠다.여기서 데이터 보내는 걸로 React에서 처리할 예정이다. 사용자가 로그인을 하면 토큰이 응답으로 온다다음 요청할때 헤더에 넣어서 토큰을 보내준다베어러 토큰이란 무엇인가요?이제 베어러 토큰으로 넘어가겠습니다. 베어러 토큰은 콘서트에서 VIP 패스와 같습니다. 이 패스를 가지고 있다면, 제한된 구역에 들어갈 때마다 신분증을 보여줄 필요가 없습니다. 토큰 자체가 접근 권한을 증명합니다.베어러 토큰은 어떻게 작동하나요?토큰 발급: 사용자가 성공적으로 로그인하면 서버가 토큰을 생성합니다. 일반적으로 JSON 웹 토큰(JWT)입니다.토큰 저장: 이 토큰은 클라이언트 측에 저장되며, 로컬 저장소, 쿠키 또는 다른 곳에 저장될 수 있습.. 2026. 2. 4. [26.02.04] React 재직자 교육 3 - Login //로컬 스토리지에서 읽기 useEffect(() => { // startTransition으로 감싸서 React 19의 경고 방지 // React 19는 useEffect 내부의 동기적 setState를 경고함 (실행에는 영향 없음) // startTransition으로 감싸면 "transition 업데이트"로 마킹되어 경고 예외 처리됨 // 감싼 코드는 즉시 실행되며, 렌더링 우선순위만 낮아짐 startTransition(() => { setUser(localStorage.getItem("user") || ""); setAccessToken(localStorage.getItem("accessToken") || ""); setIsLoading.. 2026. 2. 4. [26.02.04] React 재직자 교육 1 - useMemo, React.memo 게시판 UI 만들기 boards갯수만큼 으로 요소를 만든다. React.memo React.memo컴포넌트에 동일한 props가 들어온다면 React.memo는 컴포넌트 렌더링 과정을 스킵하고 마지막에 렌더링된 결과를 재사용한다.React.memo는 오직 props 가 변경됐는지 아닌지만 체크한다.이때 props 를 받는 컴포넌트는 자식 컴포넌트로, 부모 컴포넌트로부터 props 를 받는다.이때 문제는, 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트도 함께 리렌더링된다는 것이다.이러한 문제를 해결하기 위해 React.memo 를 사용할 수 있다. 아래 코드에서 MyComponent 가 이전과 동일한 props 를 받아 가장 마지막에 렌더링했던 결과를 다시 렌더링해야 한다면, React는 컴포넌트 렌더링 .. 2026. 2. 4. [26.02.03] React 재직자 교육 7 - Routing 라우팅 useRouter 훅으로 router를 얻는다router.push("경로"); => 이벤트에 의한 이동 원래 리액트는 CSR이다.next가 들어감으로서 SSR의 개념이 생겼다. 페이지 이동은 "use client"클라이언트 컴포넌트만 가능하다서버 컴포넌트는 불가능 하다 "use client"import { useRouter } from "next/navigation";function ClientComponentB() { const router = useRouter(); return ( ClientComponentB router.back()}>뒤로 가기 );}export default ClientComponentB;.. 2026. 2. 3. [26.02.03] React 재직자 교육 6 - 컴포넌트 라이프 사이클 Component Life Cycle use로 시작하는 것은? Hook훅이다 라이프사이클과 관련된 콜백useEffect콜백을 시키는 훅이다 첫번째 매개값에는 콜백 함수를 작성한다.두번째 매개값이 어떤지에 따라서 이 콜백의 실행 시점을 결정하게 된다.useEffect(() => {//마운트 또는업데이트후실행return () => {//언마운트시 또는업데이트전실행};}, […]);상태가 업데이트 된 후 마운트언마운트는 상태가 업데이트 되기 전 실행 return은 보통 생략한다. 1)두번째 매개변수 [ ] 빈배열이면 생성될때 딱 한번만 실행이 된다.retrun이 없으니 언마운트 없는것이다.2)두번째 매개변수 없으면 처음에 호출할때 그 후 리랜더링 일어날때마다 호출됨 3)관심대상이 변경이 되면 실행useState(()=>{/* 실행할부분 */, [.. 2026. 2. 3. [26.02.03] React 재직자 교육 4 - State 상태관리 useXXX은 컴포넌트의 라이프 사이클에 따라 생성되고 소멸된다. useEffect는 상태값이 바뀌면 즉, 컴포넌트가 바뀌면 이 컴포넌트는 수정이라고 보고 리랜더링된다.다시 하위 dom이 생성된다. useEffect는 처음 dom이 생성될때 실행되고 상태가 바뀌면 또 실행이 된다.addNumber로 number라는 상태를 바꿨더니 useEffect가 실행이 된다. "use client"import { useState } from "react";function Exam04FormState() { //리랜더링이 되면 컴포넌트 처음부터 다시 시작됨 -입력 다 날아감 //상태 선언 - 초기값으로 객체를 줌 {} const [user, setUser] = useState({ userId: "", .. 2026. 2. 3. 이전 1 2 다음
