이롭게 현명하게

Component를 만들 때는 두 가지 방법으로 만들수 있다. Function Component Class Component React Component를 만들기 위해 터미널에서 yarn start명령어를 실행한다. $ yarn start // 또는 $ npm run start src 디렉터리에서 새로운 파일을 만들었다. import React from 'react'; : 리액트 컴포넌트를 만들 때 꼭 써야 한다. '리액트를 불러와서 사용하겠다.'라는 의미이다. import React from "react"; 함수형태로 컴포넌트를 만들기 위해서는 function 키워드를 사용한다. Tutorial이라는 컴포넌트를 만들었다. 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있다. 이것을 JSX라고 부..

목차 Component 렌더링 과정 Component 합성 Component 추출 [Component 렌더링 과정] Component는 붕어빵 틀의 역할을 한다. 그렇기 때문에 화면에는 Component가 렌더링 되지 않는다. Component라는 붕어빵 틀을 통해 찍어 나온 element라는 붕어빵이 실제로 화면에 나오게 된다. 렌더링을 위해 가장 먼저 Component로부터 element를 만들어야한다. const element = ; const element = ; 이 두 코드 모두 React element를 만들어 낸다. 이 element를 렌더링 한다. function Welcome(props){ return 안녕, {props.name}; } const element = ; ReactDOM.r..

목차 Component란?Component 만들기Component의 이름  [Component란?]리액트는 Component 기반의 구조라는 특징을 가지고 있다.리액트는 모든 페이지가 Component로 구성되어 있고 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성될 수 있다.이러한 Component들을 마치 레고 블록을 조립하듯 끼워 맞춰 새로운 Component를 만들 수 있다. Component : 입력(props)을 받아 출력(Element) 하는 역할 코드 양을 줄일 수 있다.개발 시간을 줄일 수 있다.유지 보수 비용이 줄어든다. 더보기Component를 사용해야 하는 이유 에어비앤비 홈페이지다.  에어비앤비의 Component는 다음과 같다.파란색 Compone..