Frontend/React

진짜 리액트는 어떻게 생겼나? (2) - renderWithHooks와 훅의 본체

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이전 게시글에서 reconciler 패키지의 rednerWithHooks함수를 찾았고, 거기서 훅을 주입한다는 것을 알게되었다. 그럼 실제 코드를 확인하며 어떻게 훅을 주입하고 있는지 확인해보자. renderWithHooks 우선 함수의 인자들을 확인해보자. current와 workInProgress, Component, props, refOrContext, nextRenderExpirationTime을 받아서 사용한다. 자... 하나씩보자. 일단 current와 workInProgress는 넘어가자. Component는 실행시켜야할 함수를 말한다. (ReactElement의 tag 프로퍼티) props는 ReactElement의 props를 ..

진짜 리액트는 어떻게 생겼나? (1) - useState 따라가며 흐름잡기

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이 글을 쓰게된 계기 이전 게시글까지 리액트처럼 동작하는 코드를 작성해보았다. 그런데 이전 게시글에서 만든 useState는 한가지 치명적인 문제가 있다. useState를 쓰는 컴포넌트가 조건부 렌더링이 되는 경우, states배열이 망가진다는 것이다. const Component1=()=>{ const [inner,setInner]=useState("컴포넌트1입니다!"); return {inner}; } const Component2=()=>{ const [inner,setInner]=useState("컴포넌트2입니다!"); return {inner}; } const App=()=>{ const [state,setState]=useState..

리액트를 만들면서 이해해보자 (4) - useState

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 기존의 리렌더 기존의 리렌더링(사실 리렌더가 아니고 다른걸 렌더하는 거지만)은 명시적으로 다른 element를 넘겨서 업데이트 하는 형태였다. import App from './components/App'; import React from './core/React'; import { Change } from './components/Change'; const app = document.getElementById('root'); const prev = App(); React.render(prev, app); setTimeout(() => React.updateDOM..

리액트를 만들면서 이해해보자 (3) - virtual dom과 diffing

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글에서 render와 rerender를 구현했다....만 너무 성능이 안좋을 것 같으니 개선을 해보고자 한다. 참고로 아래의 diffing알고리즘은 이 블로그 글의 코드를 기반으로 작성, 개선되었다. 기존의 DOM요소 변경은 특정 DOM요소를 DOM API를 통해 가져와서 그 부분만 업데이트하는 형태이다. 이런 형태를 지금의 render방식에 적용할수는 없을까? 할수있다! 바로 기존의 element객체를 활용하는 것이다. 우리는 element객체를 DOM요소로 변경했다. 따라서 element객체의 중첩구조와 DOM요소의 중첩구조는 완벽하게 동일하다. 따라서..

리액트를 만들면서 이해해보자 (2) - render, rerender

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글을 통해 JSX요소를 객체형태로 변환하는 것 까지 진행했다. 이제 JSX 컴포넌트는 tagName, props객체, children배열을 가진 객체로 관리된다. 그럼 이제 이걸 DOM api를 사용해서 객체를 DOM요소로 변환시키자. makeDOM /** * @param {object} element createElement로 만들어진 요소 * @param {string} element.tagName 요소의 태그 이름 * @param {object} element.props 요소의 속성 객체 * @param {Array|undefined} element...

리액트를 만들면서 이해해보자 (1) - JSX와 React.createElement

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. JSX jsx는 javascript + xml의 줄임말이다. 이걸 쓰면 html마냥 쓸수가 있다. 파악해보기 근데 이걸 어떻게 html마냥쓸 수가 있지???라는 생각이 들었다. 이건 과연 내부적으로 어떻게 처리가 되는걸까? 바벨의 트랜스파일링을 확인해보자 링크에서 위 이미지를 직접확인할 수 있다. jsx라는 함수로 변환되는 것을 볼 수 있다. 좀더 복잡한 형태는 어떨까? 요렇게 변환되는 것을 볼 수 있다. jsx함수 파악하기 그럼 jsx함수는 어떻게 작동하는지를 보자 우선 jsx나 jsxs나 똑같이 jsxProd를 호출한다. 그리고 위의 import문을 보면 알 ..

리액트 컴포넌트 생애주기

생애주기 카테고리 1. 마운트 2. 업데이트 3. 언마운트 라이프사이클 메서드 총 9개의 메서드로 구성 Will : 어떤 작업을 하기 전에 실행되는 메서드 Did : 어떤 작업을 완료한 후에 실행되는 메서드 마운트 Dom이 생성되고, 웹브라우저상에 처음 나타나는 것 과정 컴포넌트 생성 constructor 실행 getDerivedStateFromProps 부모로 부터 받은 props를 자신이 가진 state에 넣을때 사용하는 메서드 render componentDidMount 업데이팅 업데이팅은 다음의 네 경우에서 일어남 props가 바뀔때 state가 바뀔때 부모 컴포넌트가 리렌더링될때 this.forceUpdate로 강제 렌더링을 트리거할때 과정 업데이트 trigger getDerivedStateFr..

Next.JS

Next.js 왜 사용가는가? 1. 유저의 대기시간 감축 2. SEO 최적화 SEO → 검색 엔진 최적화 기존 리액트는 index.html 하나밖에 없어서 검색엔진의 로봇이찾지 못해서 검색엔진에 못뜨지만, next.js는 SSR이라서 가능함 라이브러리 vs 프레임워크 라이브러리는 개발자로서 불러와서 사용하는 것 프레임워크는 코드를 불러 오는 것 → 코드를 적절한 위치에 적기만 한다면 동작이 됨(정해진 틀, 특정 규칙 내에서 작성) 라우팅 ⇒ pages안에 있는 파일명이 url이 되며, 컴포넌트 명의 그렇게 중요하지 않음 다만, export deafault를 해야함 404를 제공함 index.tsx → /의 url이 됨, 즉 home jsx, tsx를 사용하는데 react를 import 하지 않아도 됨 C..