본문 바로가기

react

Side Effects & useEffect [React - The Complete Guide 2024] Side effects are "tasks" that don't impact the current component render cycle. 사용자의 위치는 브라우저의 메소드로 부터 받을 수 있다. navigator.geolocation.getCurrentPosition position 객체를 통해 경도나 위도를 포함한 데이터를 넘겨준다. 이러한 작업들은 jsx를 반환하는 것이 아니며, 컴포넌트의 주 목적과는 다르기에, 부수효과 (side effect)라고 불린다. useEffect는 반환값이 없으며, 2개의 인자를 필요로 한다. 1. 부수효과 + 묶어줄 함수 2. dependency(의존성) 배열 의존성 배열이 변할 때, 1 (Effect)를 실행한다. 빈 배열을 준다면, 최초 컴포넌트 실행 완료 후 .. 더보기
04. 서버 사이드 렌더링 [모던 리액트 Deep Dive] 서버 사이드 렌더링이란 무엇인지, 싱글 페이지 어플리케이션이란 무엇인지.그리고 최근 React 개발자들이 가장 많이 쓰는 Next.js에 대해 간단히 알아보자. SPA vs SSRSPA란?Server-Side Rendering : SSR Single Page Application : SPA 서버 사이드 렌더링에 반대되는 개념인 싱글 페이지 어플리케이션에 대해 먼저 살펴보자.  Single Page Application이란렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초 페이지를 불러온 이후 페이지 전환이 history.pushState와 history.replaceState로 이루어짐. 즉, 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 .. 더보기
Context API & useReducer [React- The Complete Guide 2024] 더 복잡한 상태관리를 해보자...! 리액트 개발자는 주로 다수의 컴포넌트로 이루어진 앱을 만들어야 하는데, 앱이 복잡할수록, 더 많은 컴포넌트를 사용하게 된다. 보통 컴포넌트 트리로 구성이 되어있는데, 이 과정에서 상태관리가 필요하다..!! Prop Drilling을 통해 다수의 컴포넌트를 거쳐 속성을 전달할 수 있다.하지만 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하지 않고, 하위로(목표까지) 전달해주는 역할만 수행한다.=> 원하는 공유데이터를 얻기 위해 여러 컴포넌트를 거치게 되고,     이러한 방식은 컴포넌트들의 재사용성을 어렵게 한다! (+코드도 더 많이 작성해야 함..) 해결방식Component CompositionContext APIuseReducerComponent Composit.. 더보기
Refs & Portals [React - The Complete Guide 2024] Accessing DOM Elements with RefsManaging Values with RefsExposing API Functions from ComponentsDetaching DOM Rendering from JSX Structure with PortalsRefsRefs를 쓰기 전 코드import {useState} from "react";export default function Player() { const[enteredPlayerName, setEnteredPlayerName] = useState(null); const[submitted, setSubmitted] = useState(false); function handleChange(event){ setS.. 더보기
03. 리액트 훅 깊게 살펴보기 [모던 리액트 Deep Dive] 함수형 컴포넌트가 상태를 사용하거나,클래스형 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 위해 훅 (hook) 을 사용하기 시작했다. 3.1 리액트의 모든 훅 파헤치기useState, useEffect, useMemo, useCallback useRef, useContext,useReducer, useImperativeHandle, useLayoutEffect, useDebugValue..  useStateuseState : 함수형 컴포넌트 내부에서 상태를 정의하고 관리import {useState} from 'react';const [state, setState] = useState(initialState)useState의 초기값이 복잡하거나 무거운 연산을 포함하고 있다면,익명함수 () => 를 .. 더보기
Debugging React Apps [React-The Complete Guide] Finding & Fixing ErrorsMaking Sense of React Error MessagesFinding Logical Errors via the Browser DevTools & DebuggerEnabling React's Strict ModeUsing the React DevTools for Application Analysis & Manipulation  *콘솔에서 오류 메세지가 출력되는 경우오류 메세지 뒤의 stack-trace를 통해 문제가 발생하는 코드의 부분을 찾아갈 수 있음.ex) Value값 undefined 가져올 수 없는 case초기값 없을 시 if return을 통해 예외 처리    *코드에 논리적 오류가 있는 경우 콘솔에 오류 메세지가 출력되지 않음.value 값을 .. 더보기
Styling React Components [React - The Complete Guide 2024] Vanilla CSSCSS code is decoupled from JSX codeCSS code is not scoped to components -> CSS rules may clash across components How to Scoping?Inline Styleuse inline style  by jsx => { } react에서는 style 값을 표준 동적 값 문법으로 전달해야함  {{ key : value }}일반적으로 cammel 방식 선호return (Inline Style의 장단점 Quick & easy to add to JSXSytles only affect the element to which you add them. Dynamic(conditioning) Sytling is sim.. 더보기
React Essentials [React - The Complete Guide] 본 글은 udemy의React- The Complete Guide 2024 (incl. Next.js, Redux)를수강하며 작성한 글입니다.  리액트의 핵심적인 부분들에 대해 알아보자. Components, JSX, Props, State & More"React Apps are built by combining components."=> Reusable Building Blocks, Related Code Lives Together, Separation of Concerns HTML, CSS, JS => React Component (JSX) - (transpile) > Browser DOM *JSX : JavaScript Syntax Extension Rules of React Components1... 더보기