anko와 함께하는 developer :D anko와 함께하는 developer :D

React

• 커스텀 훅(custom hook)

  React/react 2024. 7. 1. 09:30

  커스텀 훅은 use 라는 이름을 접두사로 사용해줘야하고일반 컴포넌트처럼 동일하게 useState, useEffect, useCallback, useMemo 등 다 사용 가능(아니 use hook 들이 들어가야만 커스텀 훅이라고 할 수 있다, use hook들을 사용하지도 않았는데 커스텀 훅이라고 정해놓고 use라는 접두사를 붙여서는 안된다) “use” 접두사에 대한 리액트 문서

  Read More
• useEffect()

  React/react 2024. 6. 28. 10:53

  useEffect 의 작동 원리import React, { useEffect, useRef } from "react";const useClick = (onClick) => { const ref = useRef(); useEffect(() => { // 1. 컴포넌트가 마운트되었을 때 실행되는 코드 const element = ref; if (element.current) { element.current.addEventListener("click", onClick); } return () => { // 2. 컴포넌트가 언마운트되기 전에 실행되는 코드 if (element.current) { element.current.removeEventLi..

  Read More
• 컴포넌트가 리렌더링 되는 시점은?

  React/react 2024. 1. 30. 10:54

  리액트에서 함수형 컴포넌트는 랜더링 -> 컴포넌트 함수 호출 -> 모든 내부 변수 초기화의 순서를 거친다. 컴포넌트가 리랜더링되는 시점은1. state가 변경 되었을 때2. 상속받은 props가 변경 되었을 때3. 부모 컴포넌트가 리렌더링 된 경우 해당 자식 컴포넌트는 모두 리렌더링 된다

  Read More
• Compound 패턴

  React/design patterns 2023. 12. 14. 12:57

  컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해준다. 디자인시스템을 만들기 위해 래퍼런스를 찾는 중, Bootstrap이 해당 패턴을 사용하여 컴포넌트를 만들고 있었다. 장점: 컴파운드 패턴은 동작 구현에 필요한 상태를 내부적으로 가지고 있는데 이것을 사용하는 쪽에서는 드러나지 않아 걱정 없이 사용할 수 있다. 또 이 패턴을 사용하면 자식 컴포넌트들을 일일히 import할 필요 없이 기능을 사용할 수 있다. Context API 를 활용해서 컴파운드 패턴을 구현했고, 사용자가 토글 버튼을 눌렀을 때 나타날 메뉴를 렌더링하는 컴포넌트를 만들어 보았다. Toggle, List, Item 컴포넌트가 FlyOutContext Provider에 접근할 수 있도록 해당 컴포넌트는 Fl..

  Read More