Front-End Study/React.js12 페이지 라우팅 브라우저를 거쳐 웹 서버에 원하는 http를 요청하고 이에 맞는 html 파일을 받아와 렌더링하는 과정 원리 전통적인 방식 : MPA (요청한 페이지의 html을 다 받아오는 방식) -> 페이지를 변경할 때마다 기존의 렌더링했던 페이지를 모두 제거하고 다시 받아옴(효율성 X) 리액트의 방식 : SPA (하나의 페이지를 통해 모든 라우팅을 처리) -> HTML (빈 껍데기) + JS Files (.jsx등의 모듈, etc…) = Bundling (파일묶음) => React App -> Bundling된 컴포넌트 단위의 모든 파일이 제공되어 요청이 필요없이 페이지 스스로 변경 하나의 HTML파일만 존재하고 JS로 여러 요소를 그려내는 것 : CSR (Client Side Rendering) // Router.. 2024. 2. 22. 최적화 웹 서비스의 구현에 필수적인 항목(서버 성능 개선, 로딩 속도 개선, 불필요한 재연산 방지, etc…) useMemo 특정 함수 호출 시 정해진 조건을 만족해야 호출될 수 있도록 하는 Hook // ex) // 첫번째 인수로 callback 함수를 넣고, 리렌더를 원하지 않는 연산을 작성 const {totalCount, doneCount, notDoneCount} = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, no.. 2024. 2. 21. useReducer 컴포넌트 외부에 State 관리 로직 분리✅ 로직 useState()와 거의 동일 import { useReducer, useState } from "react" function Reducer(state, action) { // Reducer 함수 if(action.type === "DECREASE"){ return state - action.data; } else if(action.type === "INCREASE"){ return state + action.data; } } export default function B() { // count는 State값, dispatch는 type과 data와 같은 action값 const [count, dispatch] = useReducer(Reducer, 0.. 2024. 2. 20. React Custom Hooks 🚫 React Hooks는 일반 함수에서 호출할 수 없다. -> Component 내부 or ==또다른 React Hook(Custom Hook 제작 후 로직 분리)==에서만 가능 // Custom Hook 만드는법 // 이름 앞에 use를 붙여 Custom Hook으로 인지시키기 // useInput.js import { useState } from "react"; export default function Input(){ const [value, setValue] = useState(); // 부모로부터 value와 onChangeText를 받아옴 const onChangeValue = (e) => { setValue(e.target.value); }; return [value, onChangeVal.. 2024. 2. 20. 리액트의 라이프 사이클 기본적으로 라이프 사이클이란 탄생부터 죽음까지의 과정을 의미 리액트 : Mount(렌더링된 순간) -> Update(리렌더) -> Unmount(화면의 컴포넌트 제거)의 과정 1. Mount : 서버에서 데이터를 불러옴 2. Update : 변경된 값이 무엇인지 콘솔 출력 3. Unmount : 컴포넌트가 사용하던 메모리 정리 및 해제 리액트의 "useEffect"를 이용해 쉽게 제어 가능 useEffect 라이프 사이클을 쉽게 제어하는 리액트의 내장 훅 기본적으로 화살표 함수 선언 후 배열(의존성 배열 Deps)에 출력할 값을 넣는 식으로 작성 import { useEffect } from 'react' function App() { const [count, setCount].. 2024. 2. 17. State로 사용자 입력 관리하기, Ref로 요소 지정하기 export default function Body(){ const [name, setName] = useState(""); // 빈 문자열 초기값으로 지정 function onChangeName(e) { setName(e.target.value); // input 태그가 변경되는 이벤트가 호출될 함수 호출 } return( ) } useState를 사용하여 각각의 value값 지정 및 입력값 관리 export default function Body(){ const [name, setName] = useState(""); const [gender, setGender] = useState(""); const [bio, setBio] = useState(""); // 각각의 입력폼마다 useState 지정 .. 2024. 2. 15. 이전 1 2 다음