Front-End/React

Front-End/React
[React] Custom hooks의 return value
Custom Hook에서 여러개의 값을 return하는 방법은 두가지가 있다. const [one, two] = useNumbers(); const { a, b, c } = useAlphabet(); array형태와 object형태로의 return이다. 어떠한 경우에 array형태를 사용하고 object형식을 사용하는지에 대한 정답은 없다. 하지만 두 타입의 장단점이 극명하기 때문에 상황에 따라 구분에서 사용하면 좋다. array로 return const [color, setColor] = useState('MintCream'); const [width, setWidth] = useState('100vw'); 적은 수의 값들을 return하는 경우 같은 컴포넌트 내에서 한번 이상 사용하는 경우 array..
→2021.10.16
Front-End/React
[React] Custom hook을 만들기 전에 고려해야 할 것들
들어가면서🚪 Building your own Hooks lets you extract component logic into reusable functions. 최근 내가 컴포넌트를 설계할 때 가장 중요하게 생각하는 것은 컴포넌트의 역할이 명확하게 나타나는가 이다. 예를 들어보자. app이라는 페이지에 input field가 있고 확인 버튼이 있다. 이 화면의 코드는 대충 이런 식일 것이다. function App() { const [value, setValue] = useState(''); const onClick = () => { 클릭 이벤트 }; return ( ); } app 컴포넌트의 역할은 'input field와 button을 적절한 위치에 그리는 것' 그리고 '확인 버튼을 누르면 input ..
→2021.10.16
Front-End/React
[React] useCallback과 useMemo 제대로 사용하기
useCallback과 useMemo는 메모이제이션 된 값을 반환한다. 차이점은 useCallback은 함수를 메모이제이션하고 useMemo는 값을 메모이제이션한다. 면접을 준비하여 외웠던 대답이다. 실제 프로젝트를 하면서 useCallback을 써봤지만 왜 쓰는지, 언제 써야하는지를 정확히 이해하지 못했었다.(심지어는 전혀 이점없는 곳에 썼다🙄) 회사에 와서야 useCallback과 useMemo를 사용하는 목적이 무엇인지를 완전히 이해하고 올바르게 사용하게 되었다. 이제 내가 이해한 내용을 여기에 정리해보려한다. REACT의 리렌더링 React가 리렌더링을 하는 조건은 3가지이다. 자신의 state가 변경될 때 부모 컴포넌트로부터 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 여기 ..
→2021.09.12
Front-End/React
Redux-saga를 알아보자
💡 이 글을 읽기 전에 읽어보면 좋은 글 1️⃣ Symbol을 알아보자 2️⃣ for-of와 Iterator 3️⃣ Generator란 무엇일까? Redux-saga란?🤔 공식문서에서는 Redux-saga를 다음과 같이 소개하고 있다. Redux-saga는 react/redux 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을 더 쉽고 보기 좋게 만드는 것을 목적으로 하는 라이브러리이다. redux에서는 action을 발생시키면 reducer를 통해 state를 변화시켜 store를 갱신했다. Redux-saga는 action과 reducer사이에서 흐름을 제어하는 미들웨어이다. 이 중간에서 Redux-saga는 action이 발생..
→2021.09.04

• 이전
• 1
• 2
• 다음