혼자 공부하는 자바스크립트 10장 - 리액트 라이브러리 맛보기

1. 리액트(React)

- 자바스크립트 라이브러리

- 사용자 인터페이스(UI)를 쉽게 구성할 수 있도록 도와준다.

- 대규모 프론트엔드 웹 애플리케이션을 체계적으로 개발할 수 있으며, 스마트폰에서도 빠르게 동작하는게 가능하다.

 

2. 리액트 사용준비

1) HTML파일 활용

<script scr="https://unpkg.com/react@17/umd/react.development.js"></script>
<script scr="https://unpkg.com/react-dom@17/umd/react.development.js"></script>
<script scr="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

- 리액트는 확장된 문법을 사용하는데 이걸 사용하기 위해서는 바벨이라는 라이브러리를 추가로 읽어들여야 한다.

 

3. 루트 컴포넌트 출력하기

- 컴포넌트 : 리액트에서 화면에 출력되는 요소

- 루트 컴포넌트 : 가장 최상위에 배치하는 컴포넌트

- 컴포넌트 생성하기

<컴포넌트 이름></컴포넌트 f이름>

- 컴포넌트 출력하기

ReactDOM.render(컴포넌트, 컨테이너)

 

4. JSX 기본문법

- JSX(자바스크립트 확장문법) : 자바스크립트 코드 내부에 HTML 코드를 사용한 문법

- 태그 내부에 표현식을 삽입해서 출력하는 기능도 제공.

- 표현식을 출력할때는 중괄호를 사용한다.

- 표현식 출력하기

<태그>{표현식}<태그>
<태그 속성={표현식}/>

 

5. 클래스 컴포넌트

- 사용자가 직접 클래스 또는 함수를 이용해 컴포넌트를 만드는 것

- 클래스 컴포넌트 : 사용자가 직접 클래스를 이용해 컴포넌트를 만드는 것

- 함수 컴포넌트 : 사용자가 직접 함수를 이용해 컴포넌트를 만드는 것

- 클래스 컴포넌트 만들기

class 컴포넌트 이름 extends React.Component {
    render () {
        return <h1> 출력할 것 </h1>
    }
}

- React.Component 클래스는 여러 속성과 메소드를 제공하는데, 이 속성들을 오버라이드 하는 방법을 자주 사용한다.

- 클래스의 메소드 오버라이드 하기

class 컴포넌트 이름 extends React.Component {
    constructor (props) {
        super(props)
        // 생성자 코드
    }
    
    render () {
        // 출력할 것
    }
    
    componentDidMount () {
        // 컴포넌트가 화면에 출력 될 때 호출
    }
    
    componentWillUnmount () {
        // 컴포넌트가 화면에 제거 될 때 호출
    }
}

- 자주 변경하는 속성으론 state가 있다.

- state에는 출력할 값을 저장한다.

- state 값을 변경할때는 반드시 setState() 메소드를 사용한다.

// 상태 선언하기(생성자 위치)
this.state = { 속성 : 값 }
// 상태 변경하기(이외의 위치)
this.setState({ 변경할 속성 : 값 })

 

6. 컴포넌트에 이벤트 연결하는 방법

1) 메소드를 선언한다.

2) 메소드에 this를 바인드 한다.

3) render() 메소드에서 출력하는 태그의 이벤트 속성에 메소드를 입력해서 이벤트를 연결한다.

class App extends React.Component {
    constructor (props) {
        super(props)
        this.메소드 이름 = this.메소드 이름.bind(this) // (2) 메소드 바인드
    }
    
    render () {
        return <h1 이벤트 이름 ={this.메소드 이름}></h1> // (3) 이벤트 연결
    }
    
    메소드 이름 (event) {
        // 이벤트가 호출될 때 실행할 코드       (1) 메소드를 선언
    }
}

 

7. 스타일 지정하기

- 스타일은 지정할 때는 style 속성에 객체를 지정한다.

render () {
    const style = { }
    return <h1 style={style}>글자</h1>
}

- style 객체는 캐멀케이스로 속성을 입력한다. 대신 숫자를 입력할때는 단위를 입력하지 않아도 된다.