재활용이 가능한 UI의 구성 단위. 컴포넌트를 통하여 우리가 보게되는 View를 구성하며 각각의 역할을 가능하게 합니다. 단위적으로 독립적인/종속적인 역할을 수행하면서 각각의 변화 사항에 대한 State와 종속 사항에 대한 Props를 가집니다.
- 재활용하여 사용할 수 있다.
- 코드 유지보수에 좋다.
- 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.
(부모 컴포넌트 - 자식 컴포넌트)
import React from 'react'
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
export default Component
import React from 'react'
const Component = () => {
return (
<div>
<h1>This is Functional Component!</h1>
</div>
)
};
export default Component
재사용할 가능성이 조금이라도 있으면 컴포넌트로 만들어주는 것이 좋습니다. 공통적으로 사용되는 양식에 대해서는 컴포넌트를 더 구체적으로 분리시켜서 사용하는 것이 가능합니다. 재사용 가능성이 1이라도 있으면 컴포넌트로 만들어봅시다!
HTML 문법을 JS 코드 내부에 써주면 JSX로 react 환경 상에서 동작합니다. js 파일 어디에서나 필요한 곳에 작성하면 되며, 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다. 즉, JSX를 조건문 및 반복문으로 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>
};
태그에 attribute(속성)을 주고 싶을때는 항상 쌍따옴표 "" 로 감싸줘야 하며, 해당 속성을 통하여 props를 넘겨주고 활용이 가능합니다.
<> ... </>
){ ... javascript... }
<div style={{color : "red"}}>Hello React</div>
<div></div> vs. <div />
const wrong = (
<p>list1</p>
<p>list2</p>
);
React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);