function 컴포넌트

//정의 1 function FunctionComponent(){ return hello; } // 사용 ReactDOM.render(, document.querySelector("#root"))

//정의 2 const FunctionComponent = () => Hello; // 사용 2 ReactDOM.render(, document.querySelector("#root"))

React.createElement로 컴포넌트 만들기

// React.createElement( // type, //태그 이름 문자열 | 리엑트 컴포넌트 | React.Fragment // [props], //리엑트 컴포넌트에 넣어주는 데이터 객체 // [...children] //자식으로 넣어주는 요소들 // ); // 1. 태그 이름 문자열 type ReactDOM.render( React.createElement('h1', null, `type 이 "태그이름 문자열" 입니다.`) , document.querySelector('#root') ); //2. 리액트 컴포넌트 type const Component = () => { return React.createElement('p', null, `type 이 "React 컴포넌트" 입니다.`) } //(Component, null, null) 의미는 는 와 같다. ReactDOM.render( React.createElement(Component, null, null), document.querySelector('#root') ); //3. React.Fragment // 태그가 없음 ReactDOM.render( React.createElement(React.Fragment, null, `type 이 "React Fragment" 입니다.`), document.querySelector('#root') ); //4. 복잡한 리액트 엘리먼트 모임 // 안녕하세요 // 주제 .... ... 이런거.. 복잡하면 어떻게해? 복잡해!! // jsx 사용 // 우리가 작성한 어떤 코드를 => 순수하게 실행할 수 있는 자바스크립트가 필요하다. // babel CDN 추가하면 자동으로 변환해준다. ReactDOM.render( 주제 React Vue , document.querySelector('#root') );

왜 JSX를 쓰냐

React.createElement vs jsx 중에 가독성이 더 좋다.

babel 과 같이 컴파일 과정에서 문법적 오류를 인지하기 더 쉽다.

JSX문법

최상위 요소는 1개

최상위 요소 리턴의 경우 , () 로 감싸야한다.

자식들은 바로 렌더링하고 싶으면 <> 를 사용한다. => Fragment

자바스크립트 표현식을 사용하려면, {표현식}을 이용한다.

if문은 사용할 수 없음/ 삼항연산자 or && 사용

style을 이용해 인라인스타일링 가능

class 대신 className 사용해 class적용

자식요소가 있음 꼭 닫아야한다.

from http://genie247.tistory.com/201 by ccl(A) rewrite - 2021-09-24 15:27:09