출처: https://ko.reactjs.org/docs/handling-events.html 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트 처리하는 방식과 매우 유사하다. 다만, 몇 가지 문법 차이가 있다. React의 이벤트는 소문자 대신 캐멀 케이스(CamelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. HTML Activate Lasers React Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preve..

출처: https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org 1. Props VS State 공통점 두 객체 모두 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물(현재 화면에 보이는 것)에 영향을 주는 정보를 갖고 있다. 차이점 props는 (함수 매개변수처럼) 컴포넌트에 전달된다. 또한, props는 순수함수처럼(읽기전용) 사용해야하므로 컴포넌트 내부에..

리액트 컴포넌트란? 리액트로 만들어진 앱을 이루는 최소한의 단위 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 데이터를 가진 하나의 "Props" 객체 인자를 받은 후 React 엘리먼트를 반환 클래스 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 컴포넌트 렌더링 React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼..

엘리먼트란? React 앱의 가장 작은 단위, 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. DOM에 엘리먼트 렌더링하기 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 부릅니다. React 요소를 렌더링하려면 먼저 DOM 요소를 ReactDOM.createRoot()에 전달한 다음 React 요소를 root.render()에 전달합니다. const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, world; root.render(element); 변경된 부분만 업데이트하기 React DOM..

JSX란? JavaScript를 확장한 문법. JSX에 표현식 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; JSX 속성 정의 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다. const element = link ; const element = ; JSX로 자식 정의 const element = ( Hello! Good to see you here. ); 출처: https://ko.reactjs.org/docs/introducing-jsx.html