React9 HOC & HOF 고차컴포넌트(HOC, High Order Component)와 고차함수(HOF, High Order Function). 일단 둘 다 dlfma 뜻대로 작동한다. 높은 순위로 작동하는 컴포넌트와 함수다. 이런 게 왜 필요한가 했는데, 사용하다보니 필요성이 느껴진다. 더 신기한건 이런 개념을 react 문서에서도 기술하고 있다는 점이다. 클래스 컴포넌트든, 함수 컴포넌트든 마이페이지를 만든 후 이런 생각이 문득 든다. ‘마이페이지를 들어왔을 때 로그인 상태가 아니라면 경고창을 띄우고 돌려보내는 기능을 넣고 싶다’고. 그런데 가만히 살펴보니 다른 페이지에서도 로그인이 안되었을 때 들어가지 못하게 하는 점검하는 코드가 여러 곳에서 필요함을 느낀다. ‘이를 모아 한번에 묶으면 좋을텐데…’라고 생각이 드는건 당연하.. 2022. 10. 19. 전역 상태 관리 전역 상태 관리. 그 말대로 상태를 전역에서 한다는 뜻이다. 보통 우리가 state를 통해 상태 관리한다면 스코프 단위, 혹은 파일 단위다. 물론 props를 통해 자식 요소에게 해당 상태를 전달할 수 있으나, 코드가 늘어나고 props drilling이 지속되면 추후 어디에서 넘어 온 데이터인지 인지하기 어렵다. 따라서 전역으로 상태를 관리한다면 이를 방지하고 사용성도 높일 수 있다. 리액트 기본 기능인 context api가 있고, 라이브러리로는 한참 많이 쓰였던 redux, 최근 많이 쓰이는 recoil, mobx이 있으며 이 외에도 Jotai, swr, constate 등도 있다. context api 위에서 언급했듯 리액트에서 기본으로 제공하는 전역 상태 관리 기능이다. createContext.. 2022. 10. 9. useEffect 처음 페이지를 불러올 때 한 번만 로드하고 싶은 게 있다면 useEffect가 필요할 때다. 서버에서 초기값을 가져올 때, 그리고 리렌더링이 필요하지 않을 때 정말 유용한 hook인 듯하다. 물론 useEffect에는 다른 기능도 더 있다. useEffect 사용 방법 3가지를 정리했다. 사용 방법 useEffect 기본 폼은 아래와 같다. 이게 무언가 싶을 수 있지만 한 가지씩 뜯어보자. import { useEffect } from "react"; export default function UseEffectPage() { useEffect(() => { return () => {}; }, []); return ( ); } 1. 웹 처음 업로드할 때 한 번만 실행 기본 코드 useEffect(() =>.. 2022. 9. 30. useRef 리액트를 사용하다보면 DOM에 접근하고 싶을 때가 한 두번이 아니다. 자바스크립트로만 할 때는 getElementbyId나 getElementbyClass 혹은 querySeletor를 통해 쉽게 접근했다보니 리액트로 웹을 만들다보면 자연스레 DOM을 가져올 생각부터 든다. onChange나 onClick 이벤트를 통해 쉽게 이벤트 객체를 가져올 수도 있지만, 태그 자체를 가져와할 때도 있다. 이럴 때 useRef를 주로 쓴다. 사용법 파일 첨부를 예로 들어 설명하고자 한다. 파일 첨부 시 대부분 input 태그 자체를 사용하지만, 별도로 디자인해 사용하기도 한다. 이러 때 useRef를 이용한다. import { useRef } from 'react' export default UseRefPage(){.. 2022. 9. 29. state Lifting state를 활용하다보면 같은 값을 공유하고 싶은 컴포넌트가 생긴다. 이 컴포넌트에서 입력한 값이 다른 컴포넌트에서도 반영되길 바라는 것. props를 떠올릴 텐데 좋은 접근이다. 다만 props는 형제 요소에겐 줄 수 없다. 이때 필요한게 state lifting이다. 버튼을 누를 때 1씩 늘어나는 컴포넌트와, 10씩 늘어나는 컴포넌트로 예시를 들어본다. 먼저 메인페이지를 만들고 컴포넌트를 만들었다. 그리고 각각 함수를 설정했다. index.jsx import Count_first from "./Count_first"; import Count_second from "./Count_second"; export default function Main() { return ( ); } Count_first.j.. 2022. 9. 26. 이전 1 2 다음
