Component
component : 재활용 가능한 UI 구성 단위
컴포넌트의 특징:
1.재활용하여 사용할 수 있다.
2.코드 유지보수에 좋다.
3.해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
4.컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)
컴포넌트의 종류(컴포넌트를 선언하는 방식에는 두 가지):
1.Class형 컴포넌트(Class Component)
import React from 'react'
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
) }
}
export default Component
클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.
2.함수형 컴포넌트(Functional Component)
import React from 'react'
const Component = () => {
return (
<div>
<h1>This is Functional Component!</h1>
</div> )
};
export default Component
함수형 컴포넌트는 클래스형 컴포넌트에 비해서 훨씬 간단하고 단순하지만 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았습니다.
하지만 React 16.8 버전에서 Hook 기능이 추가되면서 함수형 컴포넌트에서도 state를 사용할 수 있게 되었고 그 후부터 클래스형 컴포넌트보다는 함수형 컴포넌트가 더 많이 사용되기 시작했습니다.
JSX(JavaScript Syntax Extension
)
JSX란 리액트에서 사용하는 자바스크립트 확장 문법입니다.
JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨(Babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
JSX 장점:
1.HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙합니다.
2.HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있습니다.
3.vs. DOM + Event
JSX 특징:
1.자바스크립트 표현 : { ... javascript... }
2.class vs. className
3.Inline Styling : <div style={{color : "red"}}>Hello React</div>
4.Self Closing tag : <div></div> vs. <div />
5.모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>: JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다고 배웠습니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능입니다. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용됩니다.
<>
<div className="loginBtn" onClick={() => console.log("click")}>Login</div>
<br />
<div style={{backgroundColor: "grey", height: "10px"}} />
</>🐔참고문헌
·React공식 web 사이트
https://ko.reactjs.org/
https://reactjs.org/docs/create-a-new-react-app.html
