GuruSa

리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 만들기 위한 라이브러리고 ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리다. 또한, ReactDOM이 UI를 렌더링하기 위해 사용할 HTML 엘리먼트가 필요하다. HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차 HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고, 이 DOM이 화면에 사용자 인터페이스를 표시한다. 전통적으로 웹사이트는 독립적인 HTML 페이지들로 만들어졌다. 사용자가 페이지 사이를 내비게이션하면 브라우저는 매번 다른 HTML 문서를 요청해서 로딩한다. AJAX가 생기면서 단일 페이지..

종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있습니다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 이를 확인하기 위해 먼저 섭씨 입력을 받아 끓는 점인지 아닌지를 나타내는 코드를 작성하겠습니다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil.; } class Calculator extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this..

JavaScript에서 map() 함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드는 아래와 같습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일합니다. 엘리먼트 모음을 만둘고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있습니다. function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((..

React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용하고, JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 이벤트 Activate Lasers React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( Submit ); } 여기서 e는 합성 이벤트입니다. React는 ..

이번에 React의 State와 Lifecycle에 대해 알아보겠습니다. state const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 위의 코드를 완전히 재사용하고 Clock Component로 캡슐화하겠습니다. const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props) { return..

Element const element = Hello, world; 브라우저 DOM Element와 달리 React Element는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React Element와 일치하도록 DOM을 업데이트합니다. HTML 파일 어딘가에 위와 같은 가 있다면, 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 root DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. React Element를 렌더링 하기 위해서는 우선 DOM Element를 R..

JSX에 대해 알아보겠습니다. const element = Hello, world!; 위의 문법은 JSX로 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React Element를 생성합니다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결됩니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 Component라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. React는 JSX 사용이 필수가 아니지만, JavaSc..