Just Do It

페이지 라우팅페이지 라우팅이란? 경로에 따라 알맞은 페이지를 렌더링 하는 과정이다.Multi Page Application (MPA)서버가 여러 개의 페이지를 갖고 있는 것을 말한다.많은 서비스가 사용하는 전통적인 방식이다.페이지 이동이 매끄럽지 않고 비효율적이다.서버의 부하가 심해진다. (요청이 많아질 경우 서버의 처리량이 많아지기 때문에)서버 사이드 렌더링(SSR) : 클라이언트(브라우저)가 요청했을 때 서버가 미리 가지고 있던 html 페이지를 보내면 브라우저가 이를 화면에 보여주는 방식을 말한다.클라이언트 사이드 렌더링(CSR) : 브라우저에서 자바스크립트 파일을 실행해서 직접 렌더링 하는 방식을 말한다.리액트에서는 Single Page Application (SPA) 방식을 사용한다.페이지 이동..

Context컴포넌트 간의 데이터를 전달하는 또 다른 방법으로 기존 Props가 가지고 있던 단점을 해결할 수 있다.Props의 단점 (Props Drilling) : Props는 부모 → 자식으로만 데이터를 전달 할 수 있다. 컴포넌트의 계층 구조가 두 단계 이상이 되면, 즉 손자 컴포넌트에게는 직접적으로 데이터를 전달 할 수 없다. 중간 다리의 역할을 하는 컴포넌트가 필요하다.context는 데이터보관소 역할을 하는 객체이다. props 사용할 경우 context 사용할 경우Context를 사용하기 전 고려할 점 컴포넌트와 컨텍스트가 연동되면 재사용성이 떨어진다. 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는게 아니라면 props를 사용하는게 더 적합하다.context를 사용하는 대표적인 예 : ..

최적화(Optimization)웹 서비스의 성능을 개선하는 모든 행위를 일컫는다.아주 단순한 것부터 아주 어려운 방법까지 매우 다양하다.일반적인 최적환 방법에는 서버의 응답속도 개선 / 이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선 / 불필요한 네트워크 요청 줄임 등이 있다.React App 내부의 최적화 방법에는 컴포넌트 내부의 불필요한 연산 방지 / 컴포넌트 내부의 불필요한 함수 재생성 방지 / 컴포넌트의 불필요한 리렌더링 방지 등이 있다.useMemo‘메모이제이션’(Memoization) 기법을 기반으로 불필요한 연산은 최적화하는 React Hook이다.Memoization이란? 반복적으로 수행되는 동일한 연산이 있을 때 최초 한 번의 연산을 메모리에 저장해놓았다가 결과값이 필요할 때마다 꺼..

useReducer컴포넌트 내부에 새로운 State를 생성하는 React Hook이다.모든 useState는 useReducer로 대체 가능하다.상태 관리 코드를 컴포넌트 외부로 분리할 수 있다.UI를 렌더링하는 코드보다 상태를 관리하는 코드가 길어진다면 그것은 주객이 전도된 상황이다. 그럴 때 useReducer 함수를 사용한다.Exam.jsximport { useReducer } from "react";// reducer : 변환기// -> 상태를 실제로 변화시키는 변환기 역할function reducer(state, action) { // if (action.type === "INCREASE") { // return state + action.data; // } else if (..

간단한 TodoList 프로젝트를 만들어보자.일단 완성본은?이렇게 생겼고, 코드를 작성해보자.Header.jsximport "./Header.css";const Header = () => { return ( 오늘은🐿️💛 {new Date().toDateString()} );};export default Header;가장 상위 컴포넌트로서 제목과 날짜를 표시한다.  Editor.jsximport "./Editor.css";import { useState, useRef } from "react";const Editor = ({ onCreate }) => { const [content, setContent] = useState(""); const contentRef ..

Mount탄생. 컴포넌트가 탄생하는 순간화면에 처음 렌더링 되는 순간“A 컴포넌트가 Mount 되었다.” = A 컴포넌트가 화면에 렌더링 되었다.서버에서 데이터를 불러오는 작업 등을 할 수 있다.Update변화. 컴포넌트가 다시 렌더링 되는 순간리렌더링 될 때를 의미“A 컴포넌트가 업데이트 되었다.” = A 컴포넌트가 리렌더링 되었다.어떤 값이 변경되었는지 콘솔에 출력 등을 할 수 있다.UnMount죽음. 컴포넌트가 화면에서 사라지는 순간렌더링에서 제외되는 순간을 의미“A 컴포넌트가 언마운트 되었다.” = A 컴포넌트가 화면에서 사라졌다.컴포넌트가 사용하던 메모리 정리 등을 할 수 있다.라이프사이클 단계 별로 컴포넌트들이 각각 다른 작업을 수행하도록 만드는 것을 라이프사이클 제어라고 한다.useEffec..

useRef로 컴포넌트의 변수 생성하기새로운 Reference 객체를 생성하는 기능으로, 컴포넌트 내부의 변수로 활용한다.useState와 다른 점은 어떤 경우에도 리렌더링을 유발하지 않는다는 것이다.useRef를 활용하면 특정 DOM 요소에 접근하고, 조작할 수도 있다. Register.jsximport { useState, useRef } from "react";const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "", }); const countRef = useRef(0); const inputRef = useRef(); const onCha..

State란?useState() 함수는 리턴 값으로 두 개를 반환한다. 첫 번째 요소는 state로 선언된 변수이고, 두 번째 요소는 상태 변환 함수이다.두 개의 값이 있으므로 처음부터 ‘구조 분해 할당’ 을 활용해 배열로 받는것이 일반적이다.리렌더링이란?쉽게 말해 state 값이 변경되면 return을 다시한다. 즉 변경된 state 값으로 화면을 다시 그린다.App.jsximport "./App.css";import { useState } from "react";function App() { const [count, setcount] = useState(0); const [light, setLight] = useState("OFF"); return ( {light}..

Props로 데이터 전달하기App.jsximport './App.css'import Button from './components/Button';function App() { return ( )}export default App;부모 컴포넌트에서 Props를 보낸다.Button.jsxconst Button = ({props}) => { console.log(props); return ( {props.text} - {props.color.toUpperCase()} );};Button.defaultProps = { color:"black",};export default Button;객체 형..

컴포넌트와 JSX문법의 기초에 대해서 알아보자.리액트 컴포넌트html 태그를 반환하는 함수를 Component라고 한다. (함수 컴포넌트)컴포넌트의 첫 글자는 대문자로 해야 한다.function Header() { return ( header )}const Header = () => { return ( header )}// 함수 선언식도, 화살표 함수도 둘다 가능하다. 부모 컴포넌트와 자식 컴포넌트import './App.css'const Header = () => { return ( header )}function App() { return ( 반가워 리액트! )}export default ..