이 글은 리액트가 루트 컨테이너에서 모든 이벤트 리스너를 관리하는 게 어떻게 가능한지 이해하기 위해 작성한 글입니다. 직접 리액트 원본 리소스(18, 19버전)를 뜯어보고 ChatGPT와 교차 검증하며 작성했지만, 틀린 내용이 있을 수 있습니다. 오류를 발견하시면 댓글 부탁드립니다!리액트의 파이버 재조정자 관련 개념이 나오지만, 몰라도 읽을 수 있게끔 작성했습니다.1. 네이티브 이벤트 처리 방식HTML, JS를 사용한 이벤트 처리리액트의 이벤트 처리 방식을 살펴보기 앞서, 가장 근본적으로 어떻게 브라우저 이벤트를 처리하는지 알아보도록 하자. 먼저 HTML 속성에 직접 인라인 이벤트를 추가하는 방법이 있다. 인라인 이벤트를 사용하면 이벤트 핸들러를 문자열 형식으로 전달해야 하기 때문에 복잡한 내용을 넣었을..

useState Hook 개념 useState는 상태 변경이 일어나는 변수를 쉽고 편하게 관리하기 위한 React Hook이다. useState는 원래 아래와 같은 배열을 반환한다. [변수의 값, 변수를 변경(=set)하는 함수 이름] 배열을 반환하므로 각 인덱스를 직접 찍어보는 것도 가능하다. const stateArray = useState() console.log(stateArray[0])// undefined console.log(stateArray[1])// function 여기서 상태 변수에 초기값을 할당하고 싶으면 useState 함수 인자로 초기값을 입력하면 된다. const stateArray = useState("Hi Hello") console.log(stateArray[0])// "..

프론트엔드랑 백엔드 연결할 때마다 정신이가 없어진다.. 이건 미래의 내가 또 정신을 잃지 않게 하기 위해 정리하는 글... 글의 목차 React 프로젝트 만들기 (create-react-app) server 파일 만들기 (+route 파일 만들기) Proxy 서버 설정 React 에서 Server 로 데이터 요청하기 실행하여 확인 1. React 프로젝트 만들기 npm create-react-app project_name (이 글에서는 CRA말고 다른 방식으로 만든 프로젝트를 서버와 연결하는 것은 다루지 않는다.) 2. Server 파일 만들기 (+Route 파일 만들기) 우선 axios, express를 설치한다. npm install axios// axios 말고 fetch를 쓴다면 생략 npm in..

프로젝트 계기, 계획 그냥 리액트로 뭐 좀 만들어볼까 했다 이건 그냥 달력 그 자체일 뿐이라 별 다른 기능이 없는데, 이런 기능을 추가하고 싶다 로그인 cell 클릭 시 할일 추가 (굳이 로그인하는 이유=할일 관리하려고 & 백엔드 연습 겸) 설정 페이지 추가 => 테마를 사용자가 선택할 수 있게 만들면서 겪은 문제, 해결방법 - new Date()로 월의 시작/마지막 날짜 구하기 우선 이 세 가지를 알고 시작했다. new Date()는 1월~12월을 각각 0~11로 나타낸다 new Date(년, 월, 1) 을 하면 해당 연월의 시작 날짜를 구할 수 있다

누구 알려주려고 쓰는 튜토리얼 아님. 개인 기록용. (John Ahn 님의 따라하며 배우는 노드, 리액트 강의를 보며 작성하였음) 1. Redux 라이브러리 설치 Redux를 쓰려면 라이브러리 다운로드를 해야 한다. npm install redux react-redux redux-promise redux-thunk --save redux-promise와 redux-thunk는 action이 객체가 아니라 promise, function이어도 dispatch할 수 있게 해주는 라이브러리이다. 2. index.js 수정 index.js에 아래 내용을 추가한다. import { Provider } from 'react-redux'; import { applyMiddleware, createStore } fro..