[ Web ]/React.js

[React.js] Kossie Coder - 2강. 폴더구조 & 컴포넌트 소개

HoYoung Kim 2021. 12. 28. 15:20

1. render()

// ReactDOM.render(element, container{, callback});
// element : component
// container : /public/index.html에서 id가 root인 요소

ReactDOM.render(
	<React.StrictMode>
		<App/>
	</React.StrictMode>,
	document.getElementById('root')
);

2. Strict 모드

// StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.
// Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
// Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.

...
	<React.StrictMode>
		<App/>
	</React.StrictMode>
...

3. JSX

// React Component의 return 값으로는 JSX가 들어간다.
// JSX란 JavaScript를 확장한 문법입니다.
// JSX는 React element를 생성합니다.

function App() {
	...
	return (
		<div className="App">
			...
		</div>
	);
}

강의 링크

https://youtu.be/AODd4CjE1h8