React 13

[React] 리액트의 hydration

리액트는 DOM에 리액트 컴포넌트를 렌더링 해주는 render메소드를 제공한다. ReactDOM.render(element, container[,callback]) render는 컨테이너 DOM에 element를 렌더링 하는 함수이다. 이 render함수는 container의 자식으로 react component를 넣어주는데, 기존에 이미 렌더링 된 react component가 있다면, 업데이트만 해주게 된다. 그리고 렌더링이 완료되면 세 번째 인자로 전달된 callback이 실행되게 할 수 있다. 이 방식은 CSR(Client Side Rendering)을 할 경우에 사용된다. 그렇다면 SSR(Server Side Rendering)을 사용하는 프레임워크를 사용할 경우에는 어떻게 해야 할까? 이때 사..

Tech/React 2022.04.15

[Tech] CRA없이 react 개발 환경 구축하기

React 환경에서 개발을 진행하면서 CRA를 통해 보통 개발 환경을 구축해왔다. 하지만, '프론트엔드 개발자라면 빌드 시스템을 직접 구축할 수 있어야 하지 않을까?'라는 생각이 들었다. 또한 상황에 맞게 환경 설정을 수정하며, 성능을 개선해 나가는 작업이 필요하다고 생각했다. 이번 작업은 macOS 환경에서 진행하였고, CRA 없이 react 개발 환경 구축을 시작해보겠다. package.json 만들기 가장 먼저 내가 작업하고자 하는 위치에 가서 프로젝트 초기화를 통해, 어떤 프로젝트를 진행하고자 하는지에 대한 정보를 입력한다. yarn init 명령어를 통해서 내가 작업하고자 하는 폴더를 node.js 프로젝트로 초기화 시킨다 해당 명령어를 진행하면 아래와 같은 question이 나오게 되는데, 내..

Tech 2022.04.14

[Tech] React v18, createRoot의 등장

2022년 3월 29일부로 react version 18을 사용할 수 있게 되었다. v17에서 v18로 업데이트되면서 root API에서 변화가 생겼는데, 이번에 그 부분에 대해서 다뤄볼까 한다. ‘root’는? root는 react가 렌더링 할 트리를 추적하는 데 사용하는 최상위 데이터 구조에 대한 포인터이다. Legacy root API(v17) : root는 DOM 요소에 연결하고 DOM 노드를 통해서 액세스 했다. New root API(v18) : root를 만들어주고, 그것을 렌더링 한다. // Before import * as ReactDOM from 'react-dom'; import App from 'App'; const container = document.getElementById('..

Tech 2022.04.01

[React]You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) 오류

npx create-react-app taskbox 명령을 사용했는데, 아래와 같은 오류가 발생하여서 이를 해결해보고자 한다. 간단하게 이제 글로벌 설치가 지원되지 않는다는 것이다. You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) We no longer support global installation of Create React App. 해당 오류를 해결하기 위한 방법으로 아래와 같은 방법이 터미널에 제시되고 있다. Please remove any global installs with one of the following commands: npm uninstall -g create-react-app ya..

Tech/React 2022.01.13

[React.js] React.js에서 API 로딩 처리하기

React.js 에서 API 로딩 처리하기 웹 브라우저에 API가 호출되어서 랜더링이 진행되어야 하는데 그렇지 않은 경우에 사용자에게 로딩 화면만 출력이 되도록 구성해보겠다. https://material-ui.com/components/progress/ 를 이용해서 API 로딩 처리를 진행해보겠다. 0️⃣ 필요한 라이브러리 불러오기 필요한 라이브러리를 import 해준다. import CircularProgress from '@material-ui/core/CircularProgress'; 1️⃣ state를 추가하기 progress bar는 0%부터 100%까지 충전이 되듯이 애니메이션이 보여지게 된다. 그렇기 때문에 completed라는 변수를 만들어서 0이라는 값을 넣어 주었다. state = {..

Tech/React 2021.03.16

[React] state 사용 2

1. state 사용 - 2 아래와 같은 코드가 있을때, 여기서 를 주목해보자. 이 코드가 나타내는 바는 미리 만들어 놓은 TOC 컴포넌트를 반환해주게 된다. 이 부분은 web 상에서 봤을 때, 글 목록을 보여주게 된다. 그렇다면 여기서 TOC 안에 있는 데이터로 App의 내부 state를 TOC에 주입해주는 것을 통해서 자동으로 데이터를 바꿔주고 싶다면 어떻게 하면될까? 쉽게 말해서 새로운 글 목록이 추가될 때마다, TOC를 열어서 수정하지 않고 바로 수정하는 것이다. 이를 위한 첫번째 단계로 contents라는 state를 만들어주었다. 데이터가 여러개이기 때문에 [] (대괄호)를 통해서 배열을 만들었다. 그리고 3가지 객체의 배열을 만들었다. 각각 id 값, title 값, desc 값을 갖는다. ..

Tech/React 2021.01.12

[React] State 사용 (class 컴포넌트)

1. props 초기화 어떤 Component가 실행될 때, render보다 먼저 실행이 되면서 그 Component를 초기화 시켜주고 싶은 코드는 constructor안에다가 코드를 작성한다. 2. state 사용 state를 초기화 하는 과정이다. 예를 들어, return에 담겨져 있는 내용들을 state화 시키는 과정을 진행해보면, 먼저, Head를 state화 하는 것이기 때문에 다음과 같이 title, sub값을 지정하고, head state를 만들었다. 이제 이 state를 적용시켜서 반환하는 작업을 진행하면 된다. {} (중괄호) 안에 다음과 같이 호출을 해주면 정상적으로 작동되는 것을 볼 수 있을 것이다.

Tech/React 2021.01.07

[React] props

1. React props : stands for properties React는 component를 만들어서 개발을 진행한다. 예를 들어 props라는 title을 가지고 그것을 정의하는 'Example_props'라는 component를 만들었다고 해보자. 아래의 코드는 class 방식으로 component를 생성한 것을 보여준다. 아래의 코드는 function 방식으로 component를 생성한 것을 보여준다. 이 component를 사용하기 위해는 아래와 같이 'App' component 안에 component를 넣어주면 된다. 그런데 여기서 Example_props라는 component를 이용해서 props에 대한 정의뿐만 아니라 다양하게 사용해보고 싶다면 어떻게 하면 될까? 바로 이때, 사용하..

Tech/React 2021.01.07

[React] component 생성

1. React component 만들기 : 정리 정돈의 도구 예를 들어, 아래와 같은 HTML 코드가 있을 때 이를 React 코딩을 통해서 component로 어떻게 만들어 볼 수 있을까? 먼저 src 디렉토리 안에 있는 App.js를 실행시키고, 그 코드를 수정해주면 된다. App.js 안에서 아래의 형식에 맞게 코드를 작성하면 된다. 여기서 눈여겨봐야 할 것이 있는데, 최상위 태그이다. React에서 컴포턴트를 만들 때, 그 컴포넌트는 반드시 하나의 최상위 태그로 구성되어야 한다. 위의 형식을 바탕으로 HTML 코드를 컴포넌트로 바꾸어 보면, 아래와 같이 코드를 작성할 수 있다. 이렇게 작성한 컴포넌트를 App class 안에 넣어주면 된다. 실행 결과 아래와 같이 정상적으로 잘 만들어진 것을 볼..

Tech/React 2021.01.06