🌳Frontend/react

https://www.d0dam.com/blog/react/react-hooks/make-hooks-with-think hook은 생각하고 만드세요.....제발 | d0dam's-log hooks가 react에 도입되면서 class 없이 상태와 여러 react의 기능을 사용하게 해주었다. hooks의 도입으로 react에 신세계가 열렸고, custom hooks라는 것도 만들기 시작했다. 그런데, hooks... 당신은 생각하 www.d0dam.com 을 읽고 요약했습니다. 자세한 내용은 위의 게시글을 참고해주세요. 1. hook은 순수하게 작성되어야 한다. hook도 컴포넌트와 같은 맥락으로 같은 인자를 넘기면 같은 동작을 기대할 수 있어야 한다. 2. 컴포넌트 내부에 여러 관심사가 존재하는가? hoo..

그땐 몰랐지만 지금은 알것같은(..) React와 관련이 있는 용어들. (React와 관련되지 않은 용어도 있을 수 있습니다.) 내 나름대로 정리해보려고 한다. 생각나는대로 추가할 것 [마지막 업데이트 230917] ⛔️ 주의사항 토막지식이므로 관련한건 따로 서칭할 것. 대화할때 해당 용어를 쓰는지는 회바회, 팀바팀 Stateful vs Stateless stateless 한 값은 컴포넌트 외부에 선언해주세요. 네? 정의 React 컴포넌트에서 `state` 를 사용하는 경우 Stateful 컴포넌트, state를 Stateful 하다라고 한다. 반대는 그럼 `Stateless` 라 부른다. 뭐가 문제였는데? state는 상태가 바뀔때마다 컴포넌트의 구성요소가 재렌더링 되어야 하므로, 당연히 컴포넌트 내..

📌 headless component (헤드리스 컴포넌트) 헤드리스 컴포넌트를 설명하기 전에, `useToggle` hook을 추출하여 코드 중복을 줄이는 방법을 알아보자. ✨ 토글 컴포넌트 (Toggle Component) 토글은 단순히 특정 상태를 on/off 시키는 역할을 가진다. 아래처럼 간단히 구현할 수 있다. const ToggleButton = () => { const [isToggled, setIsToggled] = useState(false); const toggle = useCallback(() => { setIsToggled((prevState) => !prevState); }, []); return ( Do not disturb {isToggled ? "ON" : "OFF"} ); ..

React를 개발하다보면 자주 쓰이는 useRef 와 ref라는 녀석에 대해서 알아보자. 어떨때 쓰나요? 우선 `useRef` 는 어떤 상황에서 사용할까? 개발을 하다보면 단순히 React JSX Element 만으로는 DOM 을 완벽하게 제어하기 어렵다. 가장 흔하게 예시를 들자면, 사용자가 특정 액션을 했을 때 input element에 focus를 해주어야 한다면 React에서 어떻게 구현해야 할까? useRef를 알고있다면, 해결법은 간단하다. input element를 ref에 연결하고, ref에 연결된 element를 focus해주면 된다. ref 가 뭔데요? ref는 reference의 줄임말이다. 한국말로는 참조정도 되겠다. ref는 일반 객체다. ref를 console.log 로 찍으면 ..