728x90 Front-End39 [React] 4. Component와 Props 출처: React 공식 홈페이지 Components and Props – React (reactjs.org) 0. 컴포넌트를 통해 UI를 재사용 가능한 여러 조각으로 나눌 수 있다. elements는 화면에서 보게되는 것이다. 보통 컴포넌트들이 모아져서 만들어진다. 변하지 않는다. 컴포넌트는 props를 받아 elements를 출력하는 함수와 같다. 내 생각에 컴포넌트는 데이터를 받아서 HTML을 구성하는 로직이 첨부된 느낌. 엘리먼트는 그 마지막 결과물. 1. 컴포넌트 정의 방법 (1) 가장 간단한 방법 function Welcome(props){ return Hello, {props.name}; } (2) 또는 ES6 문법 class를 이용 class Welcome extends React.Compo.. 2021. 2. 1. [React] 3. Element 출처: React 공식 홈페이지 엘리먼트 렌더링 – React (reactjs.org) 1. 엘리먼트(Element) > 엘리먼트는 React 앱의 가장 작은 단위. 컴포넌트의 구성요소 const element = Hello, world; 2. react 엘리먼트를 노드(태그)에 전달하는 방법 > ReactDOM.render const element = Hello, world; ReactDOM.render(element, document. getElementById('root')); 3. 엘리먼트 업데이트 방법 - 한번 생성된 element는 불편의 객체이다 - 업데이트하는 방법은 element를 다시 노드(태그)에 연결하는 방법밖에 없다. Ex) 아래는 1초마다 다시 ReactDOM.render 를 해.. 2021. 2. 1. [React] 2. JSX 출처: React 공식 홈페이지 JSX 소개 – React (reactjs.org) 1. JSX 의 예시 > javascript의 확장 문법. 자바스크립트 + 태그 const element = Hello, world!; 2. 자동 세미콜론 삽입 방지용 가로 () 사용 권장 const element = ( Hello, {formatName(user)}! ); 3. JSX도 표현식이다. > if문, for문 안에 사용할 수 있다. function getGreeting(user) { if (user) { return Hello, {formatName(user)}!; } return Hello, Stranger.; } 4. JSX 속성 정의( 태그 속성 정의인듯? 내생각) (1) 따옴표로 문자열 정의. cons.. 2021. 2. 1. [React] 1. HelloWorld 출처: React 공식 홈페이지 Hello World – React (reactjs.org) 1. Hello, world! 를 출력하는 방법이다. > index.html에 있는 에 연동되어 표시되는 것이다. ReactDOM.render( Hello, world!, document.getElementById('root') ); 2021. 2. 1. 이전 1 ··· 3 4 5 6 7 8 9 10 다음 728x90