Fe-Dev

useReducer 를 공부하면서 간략히 정리하는 글이다. ✓ useReducer 언제 사용할까 컴포넌트 내에서 하나의 state를 여기저기서 setState를 호출하여 다른 값으로 상태를 바꿔주고 있다면 추후 state를 업데이트중 장애/오류가 있을 시 유지/보수 및 관리하기에 어려움이 있다. 이런 경우에는 컴포넌트 밖으로 따로 빼서 한 곳에서 관리하는 것이 가독성도 좋고 유지/보수 측면에서도 용이할 것이다. useReducer 는 위와 같은 상황에서 state별로 관리할 때 유용하게 사용할 수 있는 React Hook이다. ✓ useReducer 사용방법 useReducer를 적용하기 전 아래의 예시코드를 확인해보자. import "./App.css"; import DiaryEdtior from "...

지난 글에서 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가 바뀌어 리렌더링 되는 것을 말하는..

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); } ..