Jinju's Development Blog

페이지 라우팅 소개 전통적인 웹 어플리케이션은 서버 측에서 여러 개의 html 파일을 가지고 있다가, 브라우저가 요청하면 html 파일을 렌더링하여 보내주는 방식을 취했었다. 이렇게 서버 측에서 html 파일들을 가지고 있는 것을 MPA (Multi Page Application) 라고 부르고, 서버 측에서 렌더링하는 방식을 SSR (Server Side Rendering) 이라고 한다. 하지만 이런 방식은 클라이언트가 새로운 페이지를 요청할 때마다 화면 전체가 새로고침 되고, 서버 측은 여러 요청을 받으면 부하가 심해진다.  그렇지만 리액트는 빠른 페이지 전환을 자랑한다. 그 이유는 무엇일까? 왜냐하면 리액트는 서버 측에서 하나의 페이지, index.html만 가지고 있는 SPA (Single Page..

Context란 컴포넌트간의 데이터를 전달하는 또 다른 방법이다. 기존의 props의 단점인, props drilling을 해결할 수가 있다. props drilling이란 부모에서 자식으로 계속해서 props를 전달해야 하는 상황을 말한다. 전에 만든 투두리스트의 컴포넌트를 살펴보면.. App, List, TodoItem이 차례대로 계층 구조를 이루고 있는데,부모가 전달한 props의 이름이 바뀌면 해당 props를 받은 자식들 역시 모두 이름을 바꿔야 하는 문제가 있다. 참 귀찮을 것이다. 그래서 나타난 것이 Context이다. Context라는 객체 형태의 데이터 저장소를 만들어, 필요한 데이터를 자식 컴포넌트에게 그때그때 할당해 주는 것이다. Context 사용하기  다음은 데이터를 넘겨줄 부모 ..

아악~ 공부하기 정말 싫은 날이다. 진심 다걸고 하기 싫은 날이다. 그냥 이불 속에서 노곤대고 싶다. 공부하기 싫은대로 공부 안하고 그대로 흘려보내고 싶다. 날 이해해줘 아님 나만 이해할게... 🥹useMemo와 연산 최적화  웹 서비스의 최적화라고 하면, 서버의 응답속도를 개선한다든가 불필요한 네트워크 요청을 줄인다든가 하는 방법들이 있다. 그건 이제 큰 범위고.. 우리가 리액트를 통해서 할 수 있는 최적화는 다음과 같다.  이 중 우리가 먼저 볼 것은 첫 번째 항목, "컴포넌트 내부의 불필요한 연산 방지"이다. 이는 useMemo 훅을 통해서 가능하다. 필요한 연산을 메모이제이션 해놨다가, 리렌더링이 필요한 상태(state)가 변화할 때만 해당 연산을 실행하는 것이다. 해당 state는 의존성 배열..

useReducer 소개// Exam.jsximport { useReducer } from "react";// reducer : 변환기// -> 상태를 변화시키는 변환기 역할function reducer(state, action) { switch (action.type) { case "INCREASE": return state + action.data; case "DECREASE": return state - action.data; default: return state; }}const Exam = () => { // dispatch : 발송하다, 급송하다 // -> 상태 변화가 있어야 한다는 사실을 알리는, 발송하는 함수 const [state, di..

라이프사이클이란? 사람의 생애주기같이, 컴포넌트에도 라이프사이클이 있다. mount, update, unmount 순서로 흘러간다.Mount : 컴포넌트가 처음으로 렌더링 되었을 때Update : 컴포넌트가 리렌더링 되었을 때UnMount : 컴포넌트가 화면에서 사라질 때useEffect 사용하기import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";import { useState, useEffect } from "react";function App() { const [count, setCount] = useState(0); const [input, setInpu..

State로 사용자 입력 관리하기 2// 간단한 회원가입 폼// 1. 이름// 2. 생년월일// 3. 국적// 4. 자기소개import { useState } from "react";const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "", }); const onChange = (e) => { setInput({ ...input, [e.target.name]: e.target.value, }); }; return ( ..

이벤트 처리하기// Button.jsxconst Button = ({ text, color, children }) => { // 이벤트 객체 const onClickButton = () => { console.log(text); }; return ( {text} - {color.toUpperCase()} {children} );};Button.defaultProps = { color: "black",};export default Button;  버튼을 클릭하거나 마우스를 갖다대는 등의 이벤트를 처리하는 '이벤트 핸들링'을 배웠다.  button 태그 내부에 이벤트 이름을 입력하고, 화살표 함수 ()=>{} 를 중괄호 안에 넣어주는 방법이 있다. 만약 내부 ..

React 컴포넌트 컴포넌트란, JSX (html 태그를 사용할 수 있는 확장된 자바스크립트 문법) 로 작성된 함수 또는 클래스를 말한다. 컴포넌트는 리액트 앱의 기본 구성 요소가 된다. 웹은 크게 Header, Main, Footer 부분으로 나눌 수 있고 이 역시 컴포넌트화 되는데, 구분하기 편하게 jsx 파일로 모듈화까지 한다. 또한, 리액트 앱에서 컴포넌트들은 계층구조를 가진다. 가장 최상위 계층은 root 컴포넌트이다. 관례적으로 루트 컴포넌트는 App 컴포넌트를 사용한다. 이러한 App 컴포넌트는 부모 컴포넌트가 되고, 자식으로는 헤더, 메인, 푸터 컴포넌트를 가지게 되겠다.  **(참고) vite로 만든 리액트 앱에서는 import 할 때 확장자를 쓰지 않아도 된다.JSX로 UI 표현하기 J..

- React.js는 어떤 기술이며 왜 활용되나요?  리액트는 자바스크립트 라이브러리이다. 브라우저의 UI 작업을 처리하며, 이를 유용하게 해주는 도구들의 묶음인 라이브러리는 npm i 또는 npm install 명령어를 이용해서 쉽게 다운로드 할 수 있다. 리액트 앱을 만드는데 필요한 기본적인 도구들은 vite(프론트엔드 빌드 도구)를 사용해 쉽게 가져올 수 있다. - React App은 어떻게 생성할 수 있나요?  먼저 패키지를 생성해야 한다. vite를 이용한다면 npm create vite@latest 명령어를 입력한다. 패키지 이름과 기본 설정들을 선택하면 폴더, 즉 패키지가 생성된다. 해당 폴더에 들어간 뒤 터미널에 npm i 를 입력해 라이브러리를 다운로드 해준다. - React App은 어..