페이지 라우팅 페이지 라우팅MPASSR서버측에서 보낸것을 브라우저가 그대로 렌더링 한다고 해서 SSR(Server Side Rendering) 이라고도 부른다. MPA!=SSR서버가 여러개의 HTML 파일을 갖고 있는것이 MPA 방식, 브라우저가 페이지를 요청했을때 미리 준비된 페이지를 응답해주는 방식을 SSR이라고 한다. 서로 다른 의미이다. REACT는 MPA방식을 채택하지 않는다. MPA방식은 페이지의 이동을 빠르게 처리하기 힘들기 때문이다.MPA 단점페이지 이동이 쾌적하지 않다.(요청마다 기존것을 지우고 새로운것을 리렌더링한다, => 화면이 살짝씩 깜빡인다.)사용자가 많을 경우 서버부하가 심해진다. 때문에 REACT는 SPA(Single Page Application)을 채택한다.SPASPA는 최초로 index.. 나의 주니어 개발 일기/REACT 2025. 11. 11. 10:20
[REACT] Context 로 전역 상태 관리하기 Context 란 Props의 데이터 전달 방식은 서비스의 부모가 커지고 컴포넌트 간의 관계가 복잡해질 경우 데이터를 전달하기 매우 비효율적이게 된다.이 비효율을 Context 를 통해서 해결할 수 있다.이런식으로 Context도 분리해서 관리할 수 있다.Props 방식의 App.jsximport './App.css'import Header from "./components/Header"import Editor from "./components/Editor"import List from "./components/List"import { useState, useRef, useReducer, createContext } from 'react'const mockData = [ { id:.. 나의 주니어 개발 일기/REACT 2025. 7. 16. 11:08
[REACT] useMemo로 랜더링 최적화 하기 useMemo로 랜더링 최적화 하기메모이제이션 기법을 기반으로 불 필요한 연산을 최적화 하는 리액트 훅 useMemo(() => {}, [])두번재 인자인 [] 안에 들어간 값이 변경될때마다 첫번째 인자인 ()=>{}콜백함수가 실행된다.const getAnalyzedData = () => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount-doneCount; return { totalCount, doneCount, notDoneCount }};const {totalCount, doneCount, not.. 나의 주니어 개발 일기/REACT 2025. 7. 14. 14:29
[REACT] useReducer useReducer지금까지의 state를 useReducer로도 만들 수 있다.다만 상태 관리 코드를 컴포넌트 외부로 분리해서 관리할 수 있다는 것이 큰 차이점 이다.Exam.jsximport { useReducer } from "react";//상태를 실제로 변화시키는 변환기 역할function reducer(state, action){ console.log(state, action); switch(action.type){ case 'Increase' : return state + action.data; case 'Decrease' : return state - action.data; default : return state; }}const Exam = () => { const[.. 나의 주니어 개발 일기/REACT 2025. 7. 3. 13:24
[REACT] useRef로 컴포넌트 변수 생성하기 useRef로 컴포넌트 변수 생성하기useStateState를 생성컴포넌트 내부의 변수로 활용 가능값이 변경되면 컴포넌트 리렌더링useRefReference 객체를 생성컴포넌트 내부의 변수로 활용 가능어떤 경우에도 리렌더링을 유발하지 않음컴포넌트 내부에서 랜더링에 영향을 미치치 않아야 되는 변수를 생성할 때 활용할 수 있다.아래와 같이 사용하면 전체 Register 컴포넌트에 영향을 안주면서 오직 refObj만 렌더링 된다.결과는 Register 랜더링은 최초 한번만 되고, 오로지 refObj값만 변경된다.const Register = () => { const [input, setInput] = useState({ name : "", birth : "", country :.. 나의 주니어 개발 일기/REACT 2025. 6. 27. 15:02
[REACT] State로 사용자 입력 관리하기 State로 사용자 입력 관리하기 1App.jsximport { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { const [name, setName] = useState("이름"); const [birth, setBirth] = useState(""); const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const onChangeName = (e) => { setName(e.target.value); } const onChangeBirth = (e.. 나의 주니어 개발 일기/REACT 2025. 6. 26. 16:06
[REACT] State를 Props로 전달하기 State를 Props로 전달하기import './App.css'import { useState } from "react";const Bulb = ({ light })=>{ console.log(light); return ( {light === "ON" ? ( ON ) : ( OFF )} );};function App() { const [count, setState] = useState(0); const [light, setLight] = useState("OFF"); return ( { setLight(light === "OFF"?"ON":"OFF") }} >{light =.. 나의 주니어 개발 일기/REACT 2025. 6. 26. 14:38
[REACT] State로 상태관리 하기 State로 상태관리 하기import './App.css'import { useState } from "react"; //상태관리를 위해서 선언해줘야 한다.function App() { const [state, setState] = useState(0); //구조 분해 할당방법, 일반적인 방법 console.log(state); return;}export default App;const [state, setState] 에서 state 는 값, setState는 state 값을 변경시키는 함수가 자리할 위치이다.State 변경해보기1.버튼 만들어서 State 값 증가시켜보기import './App.css'import { useState } from "react";function App() { con.. 나의 주니어 개발 일기/REACT 2025. 6. 26. 14:36
