React

Virtual DOM 을 알기위해선 먼저 DOM이 뭐하는 친구인지 알아보자.DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다즉, 웹 페이지

출처 https://delivan.dev/react/stop-asking-if-react-hooks-replace-redux-kr/Redux 와 context 관련 글들을 찾아보던중 흥미로운 글이 있어서 가져와 봤습니다많은 동료들이 내게 같은 질문을 다양한 방

자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다.그러나, 인터프리터 언어인 자바스크립트는 Linter가 내장되어 있지 않다.이 때문에 런타임

하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(concerns)을 부여하게 되면 그 코드를 읽는 사람은 혼란스러울 수 있다.가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 것이다. 즉, 코드는 단위 별로 하나의 관심사만 갖도록

store middleware등의 환경을 건들지 안고 바로 적용할 수 있는 방식redux-actions에서 제공하고 있던 createAction()과 같은 방식으로 작동한다.기존의 Action creator를 세부적으로 만들 필요 없이 actionCreator를 통해서

JSX는 JavaScript XML의 줄임말이다 React에서 UI를 구성할때 사용하는 문법으로 JavaScript를 확장한 문법이다 이 문법으로 React 엘리먼트를 만들 수 있다 하지만 공식적인 JavaScript 문법이 아니여서 'Babel' 같은 컴파일러로 Ja

리액트에서 많이쓰이고 중요한 개념인 State(상태)에 대해 알아보자 State(상태) 란? 리액트에서 상태란 컴포넌트 내부에서 변할수 있는 값 이다 예를들어 어떤 홈페이지에서 로그인이 되어있어야 접근할 수 있는 페이지가 있다고 해보자 그렇다면 로그인이 되어 있는

React에서 state에 이어 중요한개념인 props에 대해 알아보자Components의 속성(property)을 의미, 외부로 부터 전달받은 값(변하지 않아야 함) 으로 해당 컴포넌트가 가진 속성에 해당부모 컴포넌트로 부터(상위 컴포넌트) 전달받은 값(React는

오늘은 React의 많은 Hook 중에 렌더링 최적화를 위해 주로 사용하는 useMemo에 대해 알아보자리액트는 기본적으로 부모 컴포넌트의 state / props 가 변경될때 마다 Rerendering 이 된다하지만 컴포넌트의 state / props가 하나밖에 없는

오늘은 React의 많은 Hook 중에 렌더링 최적화를 위해 주로 사용하는 useMemo에 대해 알아보자리액트는 기본적으로 부모 컴포넌트의 state / props 가 변경될때 마다 Rerendering 이 된다하지만 컴포넌트의 state / props가 하나밖에 없는

useCallback은 useMemo와 마찬가지로 렌더링 최적화를 위해 사용하는 React Hook 중에 하나이다함수를 메모이제이션 하는 Hook이고 첫번째 인자로 넘어온 함수를, 두번째 인자로 의존성 배열을 사용한다ex)기본적으로 react 컴포넌트 내에 선언된 함수

useEffect 함수는 컴포넌트가 렌더링 될때마다 특정작업을 실행할 수 있도록 하는 Rect Hook이다즉 컴포넌트가 mount / unmount / update 됐을때 특정 작업을 처리할 수 있다(class형 컴포넌트의 생명주기 메서드)기본문법컴포넌트가 처음 렌더링

useContext? usecontext는 state, props 등을 전역적으로 관리할 수 있게 해주는 리액트에서 제공하는 hook이다. Why usecontext 우리는 리액트 프로젝트에서 state, props 등을 하위 컴포넌트로 내려주면서 사용할 수 있다 그