prefer2 Log

함수형 컴포넌트와 클래스형 컴포넌트, 두 코드는 완전히 동일할까? function ProfilePage(props) { const showMessage = () => { alert('Followed ' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return ( Follow ); } class ProfilePage extends React.Component { showMessage = () => { alert('Followed ' + this.props.user); }; handleClick = () => { setTimeout(this.showMessage, 3000); }; render() { retur..

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정(Reconciliation)이라고 합니다 -React 공식 문서(Virtual DOM과 Internals)- React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. -React 공식 문서(엘리먼트 랜더링)- virtual DOM은 브라우저 API 위에 있는 JavaScript 라이브러리에서 구현되는 개념이다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리이다. 우리는 이러한 Virtual DOM을 제어하고, React에서는 이를 실제 DOM에 반영하는 ..

Ref? Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다 When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref ref를 생성하고 console.log(ref)를 해보면 위와 같은 결과를 확인할 수 있다. ref는 다음과 같이 current property를 가진 객체이다. state와 다르게 refs는 그냥 javascript 객체이므로 값을 읽고 변경할 수 있다. React는 이 객체를 통해 DOM에 직접적으로 접근 할 수 있게 해준다. ref가 DOM을 다룰 때..

Props props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. function Welcome(props) { return Hello, {props.name}; } export default Welcome; import React from 'react'; import Welcome from './Welcome'; const App = () => { return ; }; export default App; Default값 설정 import React from 'react'; function Welcome(props) { return Hello, {props.name}; } Welco..

JSX란? JavaScript를 확장한 문법이며 XML과 매우 유사하게 생겼다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. (공식적인 자바스크립트 문법은 아니다) function App(){ return ( Hello react ); } 위 코드는 아래의 코드로 랜더링된다 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 컴포넌트를 랜더링 할 때마다 React.createElement를 하는 것은 매우 번거로울 것이다. JSX를 사용하면 보다 편하게 UI를 랜더링 할 수 있다. Reac..