25G.story

리엑트의 Context리엑트는 트리구조를 갖고 있다. 그래서 부모가 자식에게 데이터를 물려줄때 props로 데이터를 넘겨주는데 먼 자식일수록 코드가 복잡해 진다. 첫째한테 알려주고 둘째한테 할려주고.. 셋쩨...어쩌구.. 이렇게 멀어질수록 코드가 복잡해 진다. 이걸 props drilling이라고 함이때 Context를 사용하면 props전달 없이도 선언한 하위 컴포넌트 모두에서 원하는 값을 사용할 수 있다. 사용법1. 생성import React, { createContext, useState, useContext } from 'react';const MyContext = createContext();2. 사용const MyProvider = ({ children }) => { const [value,..

useRefuseRef는 useState와 비슷하지만 useRef의 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있고, 값이 변하더라도 렌더링을 발생시키지 않는 특징이 있다. 리엑트의 흐름 시스템에서 벗어난 느낌의 훅이다. 즉 컴포넌트가 다시 렌더링 될 때에도 유지되는 변수를 만들 수 있는것.이를 활용해서 DOM요소에 접근하거나 컴포넌트 간의 데이터 공유, 또는 상태를 유지하는 데 유용하다. 그럼 외부 변수 활용하면 되는거 아님? 할 수 있지만. 몇가지 문제가 생긴다.컴포넌트가 실행되어 렌더링되지 않았음에도 값이 존재하게 돼서 메모리 낭비발생.컴포넌트가 여러번 생성되는데 하나의 값을 바라보기 때문에 일반적으로 인스턴스하나당 하나의 값으로 표현하는 것이 일반적이다.DOM요소 접근i..

프론트 엔드 입장에서 렌더링은 html과 css로 웹페이지에 UI를 그리는 과정을 의미한다. 리엑트에서도 렌더링이라는 과정이 존재한다. 리엑트의 렌더링- 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정을 의미한다. - 리엑트 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에게 던질지 계산하는 일련의 과정을 뜻함 렌더링 발생 타이밍1. 최초 렌더링 : 사용자가 처음 애플리케이션에 진입시2. 리렌더링: 최초렌더링 이후 발생하는 모든 렌더링클래스형 컴포넌트의 setSteate가 실행될떼클래스형 컴포넌트의  forceUpdate가 실행될때함수형 컴포넌트의 useState()의 setter가 실행될..

리액트 파이버리액트에서 관리하는 평범한 자바스크립트 객체, 파이버는 파이버 재조정자가 관리. 즉 리액트에서 어떤부분을 새롭게 랜더링 하는지 가상 dom과 실재 dom을 비교하는 알고리즘, 리엑트 파이버의 모든 작업은 비동기로 일어난다. 왜냐하면 싱글스레드로 운영되는 js의 단점을 완화하기 위함.렌더링 단계에서 사용자에게 노출되지 않는 모든 비동기 작업 수행하고 우선순위지정, 작업 폐기 등을 실행DOM에 실제 변경사항을 반영하기 위한 작업 진행파이버는 컴포넌트가 최초로 마운트 되는 시점에 생성돼 가급적 재사용된다.new FilberNode() 로 구현체 생성가능리액트 파이버 트리리액트 파이버 트리는 리액트내부에 두개가 존재한다. 하나는 현재 모습을 담은 파이버 트리, 또 하나는 작업 중인 상태를 나타내는 ..

React Router Dom React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 플랫폼의 요구사항에 따라 컴포넌트 기반 라우팅을 편하게 해준다. 리엑트는 SPA이기 때문에 하나의 index.html탬플릿을 가지고 있다. 이 하나의 탬플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html탬플릿에 넣으므로 페이지를 변경해 주게 됩니다. 이때 이 React Router Dom라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 랜더링 하는데 도움을 준다. 설치 npm install react-router-dom 설정 일단 어디에서나 React router를 앱어디에서나 사용할 수 있게 해야하는데..

React Memo? React의 렌더링 성능을 최적화하기 위한 고차 컴포넌트(HOC, Higher-Order Component)이다. 원리를 이해하려면 React의 렌더링 과정을 먼저 이해해야 한다. React 렌더링의 기본 React에서 상태나 props가 변경될 때마다 해당 컴포넌트는 다시 렌더링된다. 때로는 실제로 변경되지 않은 props나 상태에 대해서도 불필요하게 다시 렌더링되는 경우가 있을 수 있다. 이러한 불필요한 렌더링은 애플리케이션의 성능을 저하시킬 수 있다. React.memo의 원리 React.memo는 컴포넌트에 대한 메모이제이션(memoization)을 제공는데 메모이제이션이란 주어진 입력에 대한 출력을 기억해 놓았다가, 동일한 입력이 다시 주어질 때 기존의 출력을 다시 사용하는..

React 불변성 불변성이란 사전적 의미로 값이나 상태를 변경할 수 없는값 js에서 원시 타입은 불변성을 가지고 있고 참조 타입은 그렇지 않다 원시타입 : boolean, string, number, ull, undefined, Symbol 참조타입 : Object, Array 원시타입 : 고정된크기로 call Stack 메모리에 저장, 실제 데이터가 변수에 할당 참조타입 : 데이터 크기가 정해지지 않고 CallStack 메모리에 저장, 데이터 값이 heap에 저장되며 변수에 heap 메모리의 주소 값이 할당. - 배열에 대한 요소를 추가하거나 객체 속성의 값을 변경할 때 call Stack의 참조 id는 동일하게 유지되고 heap 메모리에서만 변경됩니다. 이렇게 불변성이 유지되지 않기 때문에 리액트를 ..

Props 1. Properties의 줄임말 2. Props는 상속하는 부모 컴포넌트로 부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 3. Props는 읽기 전용으로 자녀 컴포넌트 입장에서는 변하지 않는다. 변하게 하고자 하면 부모컴포넌트에서 state를 변경시켜 줘야한다. ex) A 부모 컴포넌트 state = {a : "a"} B 자식 컨포넌트 a state 필요 this.props.aprops State 1. 부모 컴포넌트에서 자녀컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하려면 State를 사용하면 된다. 2. State는 변경 가능 3. State이 변하면 re-render된다. ex) A 컴포넌트 state = {a : "a"} this.state.a

React 함수 컴포넌트에서 useState와 useEffect 훅을 사용한 간단한 예시입니다. import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return ( Count: {count} setCount(count + 1)}>Increase Count ); } export default Counter; 이 예시에서 useState 훅은 count라는 상태 변수와 그 값을 변경할 수 있는 setCount 함수를 제공합니다. useEffec..

React Hooks? class없이 state를 사용할 수 있는 새로운 기능입니다. React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용하기 때문에 먼저 그 부분 부분부터 비교를 해보자 Class Component Functional Component 더 많은 기능 제공 더 적은 기능 제공 긴 코드 짧은 코드 복잡한 코드 심플한 코드 더딘 성능 빠른 성능 리엑트 생명 주기 위와같은 생명주기를 함수형 컴포넌트에서는 사용을 하지 못했기 때문에 함수형 컴포는트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔습니다. 이 부분은 React 16.8 hooks 업데이트로 변경됐습니다. 해당 업데이트 이후에 함수형 컴포넌트에서도 생명주기를 사..