2021.04.14

React 기초

리액트 공식문서에 자세하게 나와 있다 (한 번쯤은 공식문서를 다 읽어 보자)

React.createClass -> Class -> Hooks (함수형 컴포넌트)

왜 React를 사용하나?

• SPA(single-page application)
• 사용자 인터페이스를 쉽게 구현하기 위해서(웹에서 앱과 같은 사용자 경험을 만들어 준다.)
• 데이터 처리(데이터와 화면을 일치 시키는 것을 좋게 만들어 준다.)
• 재사용 컴포넌트

리액트는 기본적으로 js로 이루어져 있다.

CRA(Create-React-App)을 사용하지 않고 react 사용하기

• #root(id가 root인 div 태그를 하나 작성 - 이 div태그에 react가 적용된다.)
• CDN(head 태그에 react script를 불러와야 한다.)
  • react : react가 동작하는 핵심적인 코드가 들어있는 lib
  • react-dom(Document Object Model) : react코드를 웹에 붙여주는 역할을 하는 lib
  • 위 두 개의 script를 필수적으로 불러와야 한다.
  • 개발용 - development
  • 배포용 - production

const e = React.createElement - HTML Tag를 만드는 메서드(함수)

e(생성할 태그명, HTML 속성(객체 형식으로 표현), 태그안에 들어갈 content)

ex)

e('button', { onClick: () => {}, type: 'submit' }, 'go' ); // <button type="submit">go</button>

class문법으로 컴포넌트 만들기

class LikeButton extends React.Component {} - react안에 component가 들어 있고 그 component를 상속 해 온다.

class는 기본적으로 constructor가 있다.

constructor(props) { super(props); }

constructor는 컴포넌트가 실행될 때 제일 먼저 실행되는 부분이다.

render() { return { //여기에 코드 작성 }; } : 컴포넌트를 화면에 어떻게 보여줄지를 반환하는 메서드

ReactDOM.render(e(class), document.querySelector('#root')) : react로 구현한 코드를 실제로 웹에 렌더링 해주는 것 -> 해당 class를 id가 root인 태그에 렌더링 한다.

기본적으로 react는 컴포넌트를 렌더링할 root가 하나 필요하다.

상태 = 바뀌는 부분 (바뀔 수 있는 부분)

constructor(props) {

	this.state = {

	// 여기에 모든 상태를 작성한다.

	liked: false,

	};

}

상태를 바꿀 때는 setState를 사용한다.

this.setState({ liked: true })

JSX & 바벨(babel)

JSX(JS + XML) -> JS에서 HTML태그를 사용할 수 있다.

//JSX문법을 사용하면서 class의 render()와 React.DOM render()에서 태그를 사용할 수 있다.

render() {
    return (
        <button type="submit" onClick={() => { this.setState({ liked: true })} }>
            {this.state.liked ? 'Liked' : 'Like'}  //content를 {}로 감싸면 js 문법 사용 가능
        </button>
    )
}

ReactDOM.render(<Class />,  document.querySelector('#root'))

바벨 - 최신 문법을 구 버전 문법으로 바꿔준다.

CDN script를 불러와서 사용

<script type="text/babel"> //type으로 지정
//코드 작성
</script>