티스토리

이뇽의세상

검색하기

블로그 홈

이뇽의세상

helloinyong.tistory.com/m

자기개발이 취미인 개발자 블로그

구독자: 41

방명록 방문하기

주요 글 목록

React Compiler 파헤치기 우리는 리액트에서 렌더링 최적화를 위해, 변화되지 않는 부분들을 리렌더링 되지 않도록 useMemo, React.memo, useCallback Hook을 사용한다. 그러나 이러한 함수들을 사용할 때, 정확하게 필요한 곳에 적용하여 완전히 렌더링 최적화를 시킬 수 있다면 아주 좋겠지만, 사실상 Deep하게 이러한 위치를 찾는 것과 리렌더링 최적화 분석을 하는 것이 굉장히 까다롭고 시간이 들어간다.적절한 곳에 사용하지 못하면 해당 Hook에 대해 큰 이점을 챙길 수 없을 뿐더러 그렇다고 모든 곳에 메모제이션 처리를 해버리면, 그만큼 메모리에 저장되는 메모제이션 상태가 많아지기 때문에 성능에 악영향을 끼칠 수 있게 된다.그만큼 React 내에서 메모제이션 기능을 통한 렌더링 최적화를 적용하는게 마냥 쉽지 않.. 공감수 1 댓글수 18 2024. 7. 24.
SWC 이용해서 React + Webpack 세팅해보기 한창 블로그 초창기에 CRA(create-react-app)를 쓰지 않고 직접 package.json init부터 React + Webpack + Babel 세팅 블로그를 올린 적이 있었는데, 이미 3,4년 정도 지나고 많은 것들이 변하면서 레거시 글이 되어버렸다. 그래서 이번에 사이드 프로젝트로 인해 새로운 Single Page Application 환경이 필요하게 되면서 오랜만에 다시 세팅을 해보았는데, 요즘 컴파일러로 굉장히 핫한 SWC를 Babel 대신해서 트랜스파일러로 Webpack과 세팅을 해보았다. 그래서 이번에 SWC + Webpack을 이용해서 React 환경을 직접 구성하는 방법으로 다시 정리해보려고 한다. 우선 처음으로 package.json을 세팅한다. $ yarn init -y 다.. 공감수 3 댓글수 0 2023. 1. 25.
'Component' cannot be used as a JSX component 원인과 해결방법 아래와 같은 문제가 발생하였다. 'Component' cannot be used as a JSX component. 우선 근본적인 원인은, react가 18 버전대부터 많은 변화가 발생하며, @type/react 역시 18버전대부터 타입 정의에 대한 방식이 많이 변경되었다. 그래서 그런지, Next.js 환경에서 Dynamic Import 같은 컴포넌트도 이와 같은 에러가 발생하였다. 따라서 @type/react 버전을 17 버전대로 변경해주면 해결할 수 있다. { "name": "create-react-app", "scripts": { ... }, "dependencies": { "react-dom": "17.0.2", }, "devDependencies": { "@types/react": "17.0... 공감수 2 댓글수 0 2022. 9. 5.
[2019.08.14] Mobx State Tree(mst) 사용법 Mobx State Tree는 Mobx에서 조금 더 체계가 잡힌 패러다임....? Mobx의 type, action 등 구조의 자유도가 높았다면, mobx state tree는 관련된 것들끼리 tree 구조로 구성하도록 한다. (설명이 아직은 어렵다..) # mst를 사용하기 위한 환경 세팅 $ npx create-react-app $ yarn add mobx mobx-react mobx-state-tree # model 정의 model은 컴포넌트 내에서 사용되는 하나의 store이다. 해당 store 값을 조작하는 함수인 actions. store 변경으로 인해 자동으로 연상되는 (mobx의 computed와 같은)값 views. 위와 같이 하나의 store와 해당 store에 관련된 것들끼리 모여 하.. 공감수 0 댓글수 0 2019. 8. 14.
[2019.08.11] Mobx-react 기본 개념 및 사용법 2 (살짝 어려움 주의) # Mobx-react 기본 개념 및 사용법 1 [2019.08.11] Mobx-react 기본 개념 및 사용법 1 (살짝 어려움 주의) Redux와 같이 global state 관리를 할 수 있는 mobx라는 라이브러리. Mobx는 Redux처럼 React에 종속되어 있는 라이브러리가 아니므로, 꼭 React가 아닌 일반 javascript 내에서 또는 vue.js와 같은 다른 웹 프레.. helloinyong.tistory.com 앞에서 구현한 Counter 컴포넌트를 이용하여 Mobx에 대해 더 알아보도록 하자. # observable 값 변경에 의한 연산 처리 computed Counter 값을 변경할 때마다, 자동으로 제곱된 값이 나오도록 해보자. src/Counter.js import Reac.. 공감수 2 댓글수 2 2019. 8. 12.
[2019.08.11] Mobx-React 개념 및 사용법 1 (살짝 어려움 주의) 글로벌 상태 관리를 할 수 있는 MobX 개념 및 사용법에 대해 정리한다. 먼저 MobX는 리덕스와 같이 리액트에 종속되어 있는 라이브러리가 아니다. React가 아닌 일반 javascript 내에서 또는 Vue.js와 같은 다른 웹 프레임워크에서도 사용할 수 있는 점을 참고하자. MobX 개념 파악하기 - Observable (관찰받고 있는 state) 리액트 안에서 사용되는 글로벌 상태를 직접 변경하며 어떻게 상태가 변했는지 파악하는 요소. - Computed Value (연산된 값) 이벤트 발생으로 인해 어떠한 연산에 필요로 하는 state에 변화가 생겼을 때, 그 state 변화에 따라서 새로운 연산 작업을 수행하게 된다. 해당 state에 변화가 없으면, 그냥 기존의 값을 사용한다. - Acti.. 공감수 13 댓글수 4 2019. 8. 11.
[2019.07.11] React + TypeScript + Webpack 환경 설정 React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹팩 세팅에 TypeScript를 적용한 환경설정을 해보자. # 프로젝트 디렉토리 생성 $ mkdir React_TypeScript $ cd React_TypeScript 프로젝트로 사용할 디렉토리를 생성하고 해당 디렉토리로 이동한다. # packge.json 생성 $ npm init -y 해당 프로젝트의 디렉토리에 사용할 packge.json을 생성한다. # webpack 세팅 $ npm i -D webpack webpack-cli 프로젝트에 사용할 webpack을 개발용 패키지로 설치한다. $ touch webpack.config.js 이후에 webpack 실행에 관한 설정을 하는 webpack.config.js 파일을 root 경로에 생.. 공감수 4 댓글수 1 2019. 7. 11.
[2019.05.08] react-redux 사용하기 (매우 어려움 주의...) 리액트 컴포넌트의 Depth가 커질 때마다 컴포넌트들끼리 state를 주고받기가 힘들어진다. 예를 들어, Depth가 5 정도 있는 컴포넌트가 Depth가 2 정도에 있는 컴포넌트의 state를 변경한다고 하면, 중간에 있는 모든 컴포넌트들이 해당 기능을 전달해 주어야 한다. 그래서 모든 컴포넌트들이 state를 쉽게 공유할 수 있게 하는 방식이 redux이다... 개념이 정말 엄청나게 어렵다... 지금까지 배운 스프린트 중 제일 어려운 것 같다. 이틀동안 리덕스만 공부했는데, 이제야 감이 조금 잡힐 정도이다. 내가 공부해서 느낀대로, 습득한 대로 정리한 리덕스 개념. 우선 리덕스는 리액트 내부에 있는 기술이 아니다. 리덕스는 순수 html, javascript 내에서도 사용 가능하다. 그냥 대체적으로 .. 공감수 4 댓글수 3 2019. 5. 8.
[2019.04.15] React의 개념 - LifeCycle API lifeCycle 즉, 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다. 모든 컴포넌트는 이러한 lifeCycle 동안 발생할 수 있는 함수들을가지고 있다. -- [2019.04.17] 수정사항 -- 현재 리액트 버전 16.4에 들어서면서 왠만한 라이프사이클이 불필요하게 되었다. 현재 공식문서에 나오는 라이프사이클 API componentDidMount : 초기 컴포넌트가 생성될 때 componentDidUpdate : 중간에 컴포넌트가 변경사항이 있을 때 componentWillUnmount : 컴포넌트가 삭제될 때 ------- # 브라우저에 나타나기 전 호출되는 API constructor constructo.. 공감수 0 댓글수 0 2019. 4. 15.
[2019.04.15] React의 개념 - state 내가 이해한 대로 적는 설명 state는 해당 컴포넌트가 가지고 있는 상태, 즉 데이터를 말한다. 각 컴포넌트들은 자신의 데이터들을 가지고 있을 수 있다. (함수형의 컴포넌트는 state를 가지지 않는다! 오로지 class 방식만!) # state를 선언하는 법 class Hello2 extends React.Component{ constructor(props){ super(props); this.state = { //여기에 Object 방식으로 state를 저장 name : 'inyong', age : 27 } } render = () => ( Hello {this.props.todo} ) } constructor 생성자에서 state변수를 만든다. 그리고 그 안에 object 방식으로 데이터를 추가해.. 공감수 0 댓글수 0 2019. 4. 15.
[2019.04.15] React의 개념 - props 내가 이해한 대로 적는 개념 설명 기존의 자바스크립트와는 다르게 react에는 클래스나 함수 하나하나가 컴포넌트로 볼 수 있다. 컴포넌드는 여러 html요소가 구현되어 있는 하나의 html구성(?) # 함수 방식으로 컴포넌트를 생성하는 방법 const HelloWorld = () => { return ( 헬로월드 ); }; ReactDOM.render(, document.getElementById("root")); 컴포넌트 생성 방법은 두가지가 있다. 위 코드처럼 함수 형태로 생성하는 방법. return 괄호 안의 태그들이 호출되는 곳에 렌더될 부분이다. 이 방법은 따로 state를 가지지않고 짜여진 틀만 가져와서 사용하면 될 때 쓰면 될 듯하다. const HelloWorld = () => ( 헬로월드.. 공감수 0 댓글수 0 2019. 4. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.