계속 업데이트 예정입니다. onClick 이벤트 핸들러의 콜백 함수가 제대로 동작하지 않을 때 위의 예제에서 F.CloseBtn 의 onClick 메소드가 이상하게 동작했다. 이유는 부모 태그인 F.FileItem 의 onClick 메소드가 자식한테도 전파되었기 때문이다. F.CloseBtn 을 클릭하면 두개의 콜백 함수가 한 번에 작동되는 오류였다. 해결 1 부모 태그의 이벤트 핸들러 실행 시 event.target을 검사한다. event.currentTarget 은 이벤트 핸들러가 부착된 태그 event.target 은 이벤트가 실행된 태그(이벤트를 위임받은 자식 태그에서 실행되면 event.target 은 자식 태그를 가리킴) 두 값을 비교해서 이벤트 핸들러가 부착된 태그를 클릭했을 때만 실행되게 구현한다. 하지만 이 방법은 자식 태그 중에 button 태그의 클릭만 막는게 아니라 모든 자식 태그의 클릭을 막는다. 따라서

영상 설명: 빈 댓글을 입력하면 경고창이, 댓글 삭제에 성공하면 성공했다는 알림이 뜬다. 알림창을 전역 관리하는 목적 처음에는 알림창을 각각의 컴포넌트에서 호출하고 그에 따른 상태 관리도 따로 했었다. 이 방법에는 다음과 같은 단점이 있었다. >1. 알림창을 사용하는 컴포넌트마다 ` 를 호출하고 useState()` 로 상태관리를 해줘야 하며 알림창을 띄우는 함수를 따로 구현해야 해서 코드가 상당히 복잡해진다. 특정 컴포넌트에서 호출하기 때문에 해당 컴포넌트가 반환되면 알림창도 같이 꺼진다. (가장 큰 문제) 알림창을 사용할 때마다 아래의 세팅을 해줘야 한다. 이러한 이유로 useContext를 활용해 알림창을 최상위 컴포넌트 `_ap

React에서 사용자가 입력한 값을 받아오는 방법은 크게 두가지로 나뉜다. > 1. useState() - 사용자가 입력할 때마다 값 받아오기 useRef() - 사용자가 입력을 마치고 Submit 버튼 누를 때 값 한번에 받아오기 useState() 를 사용하는 방법은 한글자 한글자 업데이트 될 때마다 유효성을 검사해서 조치를 취할 수 있다는 장점이 있다. (ex. 비밀번호 입력 받을 때) 하지만 input의 개수가 많을 때 모두 useState() 를 적용하면 사이트의 속도가 느려질 위험이 있다. 따라서 굳이 유효성 검사를 할 필요가 없는 input의 경우 useRef()</

🧩 Pagination react-router-dom 은 리액트 앱 내에서 부드러운 페이지 이동을 구현하게 해주는 라이브러리이다. 이를 응용해서 Pagination 기능을 만들어보았다. Pagination은 많은 목록을 여러 페이지로 나누어서 정렬하는 기법이다. 📌 완성된 모습 📌 구현한 기능 >* 한 페이지에 최대 5개의 목록을 표시한다. 숫자를 누르면 해당하는 목록을 표시한다. (숫자는 한 페이지 최대 5개) Start - 1 페이지로 이동 <span style="color:#7283

본 포스트는 Udemy 의 리액트 강좌를 정리한 글입니다. 강의 링크 🧩 react-router-dom 이란? react-router-dom 은 React 앱 내에서 페이지 이동을 가능하게 해주는 라이브러리이다. 흔히 쓰는 a 태그와 다르게 페이지가 새로고침 되지 않고 부드럽게 넘어가는 효과를 구현할 수 있다. 기존의 버전 5에서 6으로 넘

본 포스트는 Udemy 의 리액트 강좌를 정리한 글입니다. 강의 링크 상품 목록 Firebase 와 연동하기 📌 추가한 기능 > 1. 상품 목록 삭제 시 장바구니에서도 동일 품목 삭제하기 Redux 와 Firebase 의 상품 목록 동기화하기 페이지 로드할 때 Firebase 에서 저장된 상품 목록 받아오기 🧩 1. 상품 목록 삭제 시 장바구니에서도 동일 품목 삭제하기

본 포스트는 Udemy 의 리액트 강좌를 정리한 글입니다. 강의 링크 상품 목록 업데이트 기능 우선 Firebase 에 업데이트하는 기능을 제외하고 완성했다. ( Firebase 구현은 다음 포스트에서 ) 완성된 모습 📌 createSlice로 상품 목록 상태 구현하기 먼저 계속 변하는 상품 목록 정보를 관리할 <span style="color:re

본 포스트는 Udemy 의 리액트 강좌를 정리한 글입니다. 강의 링크 Redux란? Redux는 자바스크립트 상태 관리 라이브러이다. ( React, Node.js 에서 모두 사용 가능하다.) 웬만한 개인 리액트 프로젝트에서는 비슷한 상태 관리 라이브러리인 useContext 를 사용해도 상관없지만 프로젝트가 커질수록 코드가 더러워질 수 있다. (예시 코드) 이때

🧩 Clean-Up 함수란? 공식문서 useEffect() 함수의 return 값으로 콜백 함수를 설정하면 Component가 unmount or update 되기 직전에 이 함수가 실행된다. 사용 예 버튼을 누르면 숫자가 1씩 올라가는 코드이다. 위의 그림은 버튼을 세번 눌렀을 때 출력되는

리액트를 배우던 도중 그동안 했던 것들을 정리해보고자 글을 쓰게 되었다. 🧩 React를 쓰는 이유 리액트는 페이스북에서 개발과 유지보수하고 있는 자바스크립트 라이브러리이다. 리액트의 장점은 다음과 같다. 각 컴포넌트를 분할할 수 있어서 재활용이 간편하고 가독성이 좋다. useState,useEffect 를 사용해서 간편하게 상태관리를 할 수 있다. 페이지를 이동할 때 새로고침 되지 않고 부드럽게 넘어가는 효과를 구현할 수 있다. 이외에도 많은 장점이 있다. 🧩 React 설치하기 리액트 프로젝트를 시작하는 방법에는 여러가지가 있다. 🥕 create-react-app 리액트를 처음 배우거나 싱글 페이지 앱을 만들고 싶다면 **`create-react-ap