Dev

지난 글에서 React.memo를 사용하여 최척화하는 방법에 이어서 React Hooks의 useCallback을 사용하여 최적화하는 방법에 대해 간략히 정리하는 글이다. React.memo는 동일한 props가 동일한 결과를 렌더링 할때 하위 컴포넌트의 리렌더링을 하지 않고 마지막 렌더링 결과를 재사용한다고 정리를 했었다. 하지만 이전props와 다음 props의 비교 방식이 얕은 비교 방식이기에 Object(객체) 비교에서 문제가 됐었고 이를 두번째 인자에서 areEqual 함수를 넘겨주어 props로 넘어온 객체의 프로퍼티를 비교하여 true/false를 반환하여 해결했다. 넘어오는 props가 객체 리터럴이라면 위의 방식으로 해결이 가능하겠지만 함수가 넘어온다면 위 방식으로는 조금 곤란할 수 있다..

저번글에서 React Hooks 중 useMemo를 사용하여 최적화하는 방법에 이어 React.memo를 사용하여 최적화를 하는 방법에 대해 간략히 정리하는 글이다. useMemo는 컴포넌트 내 특정 state나 props의 값이 바뀔 때만 콜백 함수를 수행하여 return 값을 업데이트하는 방식으로 최적화를 했다. React.memo는 이와는 다른 방식으로 컴포넌트가 동일한 props로 동일한 결과를 렌더링 한다면 컴포넌트를 리렌더링하지 않고 마지막으로 렌더링한 결과를 재사용한다. 한가지 주의점은 React.memo는 props로 전달받은 값의 변화에만 영향을 주고 React.memo로 감싸진 함수형 컴포넌트 내 state의 변화는 React.memo와 상관없이 다시 렌더링 된다. 1. React.me..

React Hooks중 useMemo를 사용하여 react 최적화를 하는 방법에 대해 간략히 정리하는 글이다. 컴포넌트에서 state나 props의 값이 바뀌면 해당 컴포넌트는 리렌더링이 되면서 컴포넌트 내 실행되는 함수들도 재호출 된다. 재호출 되는 함수들중에 특정 state나 props가 바뀌어야만 return되는 값에 영향이 있는 함수라면 굳이 매번 재호출할 필요없이 해당 state나 props가 바뀔때 만 호출되면 된다. useMemo는 이런 기능을 제공함으로써 불필요한 연산을 줄여 최적화에 도움을 준다. useMemo의 사용방법은 아래와 같다. import { useMemo } from "react"; 우선 useMemo를 사용하기 위해 위와 같이 import한다. const result = u..

react.js 를 공부하면서 useEffect의 사용법에 대해 간략히 정리하는 글이다. useEffect 에 대해 정리하기 이전에 react 컴포넌트의 Lifecycle(생명주기) 부터 짚고 넘어가야할 필요가 있다. React Component Lifecycle(생명주기) react 컴포넌트의 생명주기는 위와 같이 크게 Mount, Update, Unmount 3가지로 나눌 수 있다. 1. Mount 컴포넌트가 최초로 렌더링되어 화면에 나타나는 것을 말하는데 이때 초기화 작업등의 특정 작업을 수행하고 싶다면 ComponetDidMount 메소드를 사용하면 mount 되는 시점에 작업을 수행할 수 있다. 2. Update 컴포넌트내에서 관리하는 state 나 props가 바뀌어 리렌더링 되는 것을 말하는..

Visual Studio Code 로 개인공부를 하다가 형상관리가 필요할 것 같아 github 와의 연동을 해보며 간략히 정리하는 글이다. 이전 직장에서는 이클립스로 svn을 연동하여 소스들을 형상관리해왔기에 이번에는 github로 시도해보고 싶었다. 1. GitHub Repository(원격 저장소) 생성 깃허브 계정이 있다는 전제하에 첫번째로 깃허브에서 repository를 생성한다. 두번째 Repositories 탭을 클릭하여 우측의 New 버튼을 클릭하여 repository를 생성한다. repository 이름, 공개 범위(public or private)를 정하고 나서 Add a README file(해당 프로젝트의 설명, 라이센스등 부가적인 설명을 명시하는 파일) 을 체크하면 최초커밋으로 RE..

React.js를 공부하면서 useRef에 대해 간략히 정리하는 글이다. 기능 설명을 위해 위와 같이 간단한 화면에서 첫번째 input태그와 두번째 textarea 태그의 텍스트가 특정 길이 미만일때 저장버튼을 클릭시 focus가 되고 return 시키려한다. //jQuery로 구현시 const authorInput = $('input[name=author]'); if(authorInput.value.length < 1){ // 길이가 1보다 작을 경우 focus authorInput.focus(); return; } 물론 자바스크립트에서 제공하는 document.getElement나 위와 같이 jQuery를 사용하여 특정 element에 접근하여 길이 체크 및 focus가 되도록 할수 있지만 react..

react.js 를 공부하면서 짚고 넘어가야할 중요한 기능인 props에 대해 간략히 정리하는 글이다. react에서 props는 프로퍼티의 줄임말로 상위 컴포넌트에서 하위 컴포넌트에 값을 전달할때 사용하는 기능이다. 이전 게시글(State)에서 사용하던 Counter 코드를 예시로 활용해보려 한다. 1. Props 를 사용 및 추출 import MyHeader from './MyHeader'; import Counter from './Counter'; import React from 'react'; function App() { const number = 5; return ( ); } export default App; 위 예시코드는 상위 컴포넌트인 App 에서 하위 컴포넌트인 Counter 에게 pr..

react.js 에서 state의 사용법을 간략히 정리하는 글이다. react.js 에서 state는 컴포넌트가 동적으로 가질 수 있는 상태를 말한다. react 엘리먼트를 반환하는 함수형 컴포넌트에서 특정 상태 값을 실시간으로 변경하기 위해 useState 라는 React Hook을 사용할 수 있다. import React, {useState} from 'react'; const Counter = () => { console.log("counter 호출"); // count의 상태(값)이 바뀔때마다 console에서 호출되는것을 확인할 수 있다. const [count, setCount] = useState(0); const onIncrease= () => { setCount(count + 1); } ..