React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있다 React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하자. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것이다. 아래 두 컴포넌트가 있다고 가정해 보자. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 이제 사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를..
React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇가지 문법 차이는 다음과 같다 React의 이벤트는 소문자 대신 카멜케이스를 사용한다 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다 예를 들어, HTML은 다음과 같다 Activate Lasers React에서는 약간 다르다 Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다. 예를들어 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있다 Submit React에서는 다음과 같이 작성할 수 있다 fu..
이전 섹션에서 다뤄본 시계 예시를 다시 살펴보겠다. 엘리먼트 렌더링에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 root.render()를 호출했다 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 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배울 것이다. 이 컴포넌느는 스스로 타이머를 설정할 것이고 매초 스스로 업데..
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다 개념적으로 컴포넌트는 JavaScript함수와 유사하다 "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript함수를 작성하는 것이다 function Welcom(props){ return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JavaScript함수이기 때문에 말 ..
엘리먼트는 React 앱의 가장 작은 단위이다 엘리먼트는 화면에 표시할 내용을 기술한다 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해보자 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM노드라고 부른다 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드를 사용한다 React를 기존앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다. React 엘리먼트를 렌더링하..
const element = Hello, world! 이런 형태를 JSX라 하며 JavaScript를 확장한 문법이다UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다JSX라고 하면 템플릿 언어가 떠오를 수도 있지만 JS의 모든 기능이 포함되어 있다 JSX는 React "엘리먼트(element)"를 생성한다 JSX란?React에서는 본질적으로 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다 React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 분리한다. React에..
