허도경, limewhale

💡 제어 컴포넌트 제어 컴포넌트에 대한 공식문서의 설명은 아래와 같습니다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. https://ko.reactjs.org/docs/forms.html#controlled-components 사용자 입력을 기반으로 자신의 state를 관리하고 업데이트한다라고 정의되어 있는데,,🤔 솔직히 어떤 말인지 잘 와닿지 않습니다. 한번 코드로 살펴보겠습니다...

React Hook 주의점 최상위 바깥에 선언해서 실행 순서가 일정하게 하는 것이 중요합니다. 조건문 안에서 Hook를 실행시키지 않습니다. hook안에 hook을 사용하지 않습니다. Hook을 일반적인 JavaScript 함수에서 호출하지 않습니다. React 함수 컴포넌트에서 Hook을 호출하세요. Custom Hook에서 Hook을 호출하세요. 리액트에서 Hook을 반복문, 조건문 혹은 중첩된 함수 내에서 호출하지 않습니다. Hook은 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState와 useEffect 가 여러 번 ..

스크립트를 작성하다 보면 이벤트에서 currentTarget과 target이 구분되어 존재하는 것을 알 수 있습니다. 분명 차이점이 존재하기 때문에 두 개가 구분되어 사용되는 데 그 차이점을 알아보려고 합니다. 💡 currentTarget과 target의 차이점 currentTarget : 이벤트 리스너가 달린 요소 target : 실제 이벤트가 발생하는 요소 좀 더 쉽게 이해하기 위해 예시를 통해서 알아볼게요. Click!! const currentTarget = document.getElementById('event-wrap'); currentTarget.addEventListener('click',(event)=>{ console.log('currentTarget : ', event.currentT..

React를 공부하다 보면 useMemo와 useEffect의 기능이 비슷하면서 다르다고 느끼는데 그 차이점을 처음에 정확히 이해하기가 쉽지 않습니다. 그래서 두 기능의 차이점을 알아보고 어떠한 상황에서 두 기능을 각각 사용하는지 정리해보려고 합니다. useMemo와 useEffect의 기능을 공식 문서에 정의되어 있는 내용을 다시 한번 살펴볼게요. useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 공식문서에 보면 useMemo는 [메모이제이션된 값을 반환합니다. “생성(create)” 함수와 그것의 의존성 값의 배열을 전달하세요. useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산할 것..

이전에 CSS 방법론 중 하나인 BEM에 대해서 정리를 한 적이 있습니다. 현재 CSS방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 자세한 방법론에 대한 서술보다는 해당 방법론이 어떻게 다른지 또 어떠한 장점과 단점을 가지고 있는지 알아보도록 할게요. 3가지 방법론 중 무엇하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는 게 더 중요하다고 생각합니다. 그럼 우선 원론적인 질문을 하나 드릴게요. 왜 CSS방법론을 사용하는 걸까요? 잠깐씩 생각해보고 마저 아래의 글을 읽어가면서 본인의 생각과 일치하는지 보세요. 우선 제가 생각하는 방법론을 사용하는 이유는 나열해 보자면 협업 시 ..