FE Development/React4 Class 인스턴스 메소드의 this와 Arrow Function에 대하여 이 글은 리액트의 Function Component에서 클래스의 인스턴스 메소드를 사용했을 때, 메소드 내부의 this가 undefined가 나왔던 이유에 대해 알아번 내용이다. 우선 문제가 되었던 코드 예시는 아래와 같다. export class SomeClass { private user: User; constructor(user: User) { console.log("initializing!"); this.user = user; } someFuncWithUser() { //...무엇인가 일을 한다. console.log(this.user); } } export default function useSomeClass() { const { user } = useAuthContext(); const { s.. 2023. 1. 18. React 밑바닥(webpack & babel) 부터 세팅하기 웹팩이란 ? 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 의존성이 있는 모듈들을 하나의 파일로 통합시켜준다. 한 웹페이지에서 사용하는 여러개의 자바스크립트를 동시에 가져와서 생기는 네트워크 병목현상 방지한다. 모듈 단위로 개발할 수 있어 유지보수성을 높일 수 있다. 바벨이란 ? 최신 자바스크립트를 사용할 수 있게 하는 트랜스파일러 바벨은 히브리어로 '혼돈'이란 뜻이라고 성경에 나타나 있다. 자바스크립트의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 지원해주지 못하는 경우가 많다. 구약성경에서 바벨탑 건설 중 언어가 뒤섞여 혼돈 속에 바벨 탑 건설을 그만두었던 일화처럼 다양한 웹 브라우저, node.js 등 각기 다른 환경에서 혼돈에 빠지지 않고 자바스크립트 코드가 .. 2022. 8. 29. 에러노트 - can't perform a react state update on an unmounted component 문제가 되었던 사항 can't perform a react state update on an unmounted component 라는 warning 발생 해결과정 이슈 서칭 많은 초보 리액트 개발자들이 실수하고 있는 부분이어서 쉽게 원인을 찾아낼 수 있었다. 말 그대로 unmount된 컴포넌트의 상태를 업데이트 할 수 없고 이는 수행되지 않지만 메모리 누수를 일으킬 수 있다는 내용의 warning이었다. Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and as.. 2022. 2. 9. useContext, useReducer useContext 와 useReducer를 활용한 상태관리 1. useContext 기존의 컴포넌트 간에 데이터를 전달하려면 props를 이용해야 한다. props는 부모 자식 관계에서 데이터를 전달한다. A, B, C 컴포넌트가 각각 부모자식 관계인 경우 A 에서 C 컴포넌트로 데이터를 보내주려면 중간 B 컴포넌트를 거쳐야 한다. 컴포넌트가 많아져 구조가 깊어질 경우 비효율적이다. 이를 해결하기 위해 주로 사용된 라이브러리에 여러가지 전역 상태 관리 라이브러리가 있다. 주로 사용하였던 Redux를 대신 할 useContext와 useReducer에 대해 알아보았다. context는 한때 React 공식문서에서 사용하지 말라고 얘기했었으나 React 팀에서 context api를 새롭게 되살려 내고, .. 2021. 10. 7. 이전 1 다음
