React의 Event Handling Event Event를 사용할 때 주의사항 1. 이벤트 이름은 camelCase로 작성 => html의 onclick은 리액트JSX에서는 onClick 2. 이벤트에 실행 할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 객체를 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 div, button, input, form, span 등 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트 에는 이벤트를 설정할 수 없음 컴포넌트 생성 및 불러오기 1. EventPractice.js 생성과 App.js에서 EventPractice 불러오기 이벤트 핸들링 2. onChange 이벤트 설정 3. input에 입력한 값을 state에 저장 4. 입력한 ..

React 프로젝트 시작하기 1. react 프로젝트 생성하기 근데 나는 npx create-react-app hello-react를 사용했다! npx란 npx는 패키지를 한번 실행하는 것 npx로 실행하는 경우 로컬에 설치하지 않고 원격에 있는 최신 패키지를 실행할 수 있음 Webpack : 번들링 도구 번들링 도구 Browserify, RequireJS, Webpack 등이 대표적 리액트 프로젝트에서는 주로 Webpack을 사용 번들링 도구를 사용하면 require (또는 import)로 모듈을 불러 왔을 때 번들링 되면서 모듈들을 파일 하나로 합쳐 줌 src/index.js를 시작으로 필요한 파일을 다 불러온 후에 파일 하나로 합쳐 주는 것 css 파일도 Webpack의 CSS-Loader가 불러옴..

1. DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. 2. DOM의 문제점 DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. 또한, 최근 모던 웹은 SPA(Single Page Ap..

개요 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때끝난다. 컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이러한 경우들에 컴포넌트의 라이프사이클 메서드를 사용한다. 라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다. ( 함수형 컴포넌트에서는 Hooks 기능을 사용해서 비슷한 기능을 처리하는데, 여기서는 다루지 않겠다. ) 본론 라이프사이클 메서드 이해 라이프사이클 메서드 종류는 총 9가지이다. will 접두사가 붙은 메서드 👉 어떤 작업을 작동하기 전에 실행 Did 접두사가..

https://ko.reactjs.org/docs/hooks-effect.html 1. useReducer 훅이란? - useState를 대체할 수 있는 함수이다. - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있는데, 이 부분은 이후 확인해 보자. ) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. ※ useReducer를 사용하기 위한 구성요소들은 다음과 같다. 1. useReducer 함수 import React, { useReducer } from "rea..

https://ko.reactjs.org/docs/hooks-effect.html 1. useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. 1) 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 2) 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpdate, componentWillUnmount) - 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가..