이벤트 핸들링 리액트에서 이벤트 핸들링은 React 컴포넌트에서 UI 요소에서 발생하는 이벤트(예: 클릭, 마우스 오버, 키 입력 등)를 처리하는 것을 의미한다. 이벤트에 함수를 바인딩한다는 것은 UI 요소에 onEvent 속성으로 함수(이벤트 핸들러)를 전달하는 것을 말한다. const a = () => { console.log("a 함수가 호출됨"); }; const App = () => { return ( 1번 2번 a()}>3번 ); }; 각각의 버튼은 어떻게 작동할까? 비슷해보이지만 다른 결과를 가져올 수 있는데 그 차이점을 알아보자. 이벤트에 함수 바인딩하기 1. 1번 이 경우 함수의 호출 결과가 적용이 되고 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 console.log가 실행이 ..

리덕스 어플리케이션의 state를 관리하기 위한 JavaScript 오픈소스 라이브러리. 리덕스 이전에는 양방향 데이터 흐름으로 프로젝트가 커질수록 불편과 혼란을 야기 트렌드나 관리가 복잡해짐에 따라 단방향 데이터 흐름이란 특징을 갖는 flux를 개발 React + flux 구조에 reducer를 추가하여 리덕스 탄생. 리덕스가 필요한 이유 리덕스가 없을 때의 코드는 컴포넌트끼리 강하게 커플링(의존)되어있다. 그래서 있다고 기대하며 작동했는데 해당 내용이 없는 경우에 에러가 발생한다. 리덕스는 중개자 역할로 상태를 중앙집중적으로 관리할 수 있다. 리덕스 구성요소 store : 정보가 저장되는 곳. 전역적으로 호출 가능 ex)은행 state : 실제 정보. readonly 이어야함. ex) 돈/장부 red..

Props Definition 컴포넌트 속성을 설정할 때 사용하는 요소 Properties의 줄임말로, 부모 컴포넌트의 데이터를 자식 컴포넌트에게 전달할 때 사용하는 단일 객체 전달된 후에는 변수를 통해 접근이 가능함 HTML요소는 속성을 가지고 있고, React 컴포넌트는 props를 가지고 있다. prop="value" (HTML 속성과 동일한 구문) 특징 단방향unidirectional (부모→자식) readonly defaultProps : 기본값 설정 Hello.defaultProps = { name: '이름없음' } props.children : 태그 사이의 내용을 보여줌 리액트 // '리액트' 부분 비구조화할당(구조분해할당) 참고 : 구조 분해 할당 var a, b, rest; [a, b] ..

React 시작하기 개요 목적 : 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다. virtual DOM 사용하여 js 객체를 구성, 실제 DOM의 가벼운 사본 느낌 업데이트 처리 간결성 프레임워크 X 라이브러리 O → 뷰 이외의 기능은 다른 라이브러리 사용 ex) react-router Node.js, npm 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 리액트는 웹브라우저에서 실행되어 직접 연관은 없으나, 프로젝트 개발에 필요한 주요도구가 Node.js를 사용 ECMAScript 6를 호환시켜 주는 바벨(babel) 모듈화된 코드를 한 파일로 합치고(번들..