React 1

얼렁뚱땅공부했던 React 제대로 공부해보기~!

React의 핵심 모듈

import ReactDOM from 'react-dom'; // 리액트 컴포넌트와 HTMLElement를 연결한다.
import React from 'react'; // 리액트 컴포넌트 만들기

ReactDOM.render(
	<Hello />,
  document.getElementById('root')
);

class Hello extends React.Component {
	render(){
    	return <div> Hello!! </div>
    }
}

Class 컴포넌트

//render()함수는 필수적이다.
import React from 'react';

class ClassComponent extends React.Component{
	render(){
    	return(<div> Hello</div>);
    }
}

// 사용하기
ReactDOM.render(
	<ClassComponent />, document.querySelector('#root')
)

Function 컴포넌트

// 방법 1
function FunctionComponent(){
	return(<div> Hello </div>);
}
// 사용하기 1
ReactDOM.render(<FunctionComponent />, document.querySelector('#root'))

// 방법2
const FunctionComponent = () => {
	return(<div> Hello </div>);
}
// === const FunctionComponent = () => <div> Hello </div>;

// 사용하기 2
ReactDOM.render(<FunctionComponent />, document.querySelector('#root'))

React.createElement로 컴포넌트 만들기

https://ko.reactjs.org/docs/react-api.html#createelement

React.createElement(
	type, //태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
  	[props], // 리액트 컴포넌트에 넣어주는 데이터 객체
  	[...children] // 자식으로 넣어주는 요소들
)

1. 태그이름 문자열 type

ReactDOM.render(
	React.createElement("h1", null, `type = "태그이름 문자열"`),
	document.querySelector('#root')
)
// === <h1>type = "태그이름 문자열" </h1>

2. 리액트 컴포넌트 type

const Component = () => {
	return React.createElement('p', null, `type = "React 컴포넌트"`);
};
// === <p>type = "React 컴포넌트" </p>

ReactDOM.render(
	React.createElement(Component, null, null),
	document.querySelector('#root')
)
// === <Component />

3. React.Fragment type

ReactDOM.render(
	React.createElement( React.Fragment, null, `type = "React Fragment"`),
  	document.querySelector('#root')
)
// === <div id="root">type = "React Fragment"</div>

4. CreateElement한계

복잡한 html구조를 표현하기엔 어렵다.

ReactDOM.render(
	React.createElement(
      'div',
      null,
	React.createElement(
  		'div',
  		null,
  		React.createElement(
    		'h1',
    		null,
    		React.createElement(...)))),
  	document.querySelector("#root")
)

5. JSX사용하기

babeel이 순수하게 실행할 수 잇는 자바스크립트로 변환해준다. => 컴파일 과정에서 문법적 오류를 인지하기 쉽다.

ReactDOM.render(
	<div>
  		<h1>Title</h1>
    	<ul>
    		<li>item1</li>
          	<li>item2</li>
    	</ul>
  	</div>,
  	document.querySelector('#root')
);

JSX문법

• 최상위 요소가 하나여야 한다.
• 자식을 바로 랜더링하고 싶을경우 <> </>, <React.Fragment> </React.Fragment>를 사용한다.
• 자바스크립트 표현식을 사용하기위해선 { }를 사용한다.
• if문은 사용이 불가능해, 삼항연사자 혹은 &&를 사용한다.