[혼공JS] react 시작 chapter 10

리액트 라이브러리 사용준비하기

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

리액트 라이브러리를 불러와서 사용준비!

    <script type="text/babel">

리액트의 경우 자신만의 문법 JSX를 사용하므로 바벨이라는 라이브러리가 필요하다.

 

루트 컴퍼넌트 출력하기

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

루트컴퍼넌트 : 최상위 컴퍼넌트

 

컴포넌트 생성하기

<컴퍼넌트이름></컴퍼넌트이름>

컴포넌트 출력하기

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

 

JSX기본문법

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

 

동작 순서 

1.  컴퍼넌트를 생성하고   -- 이름과 사진을 포함한 컴포넌트 

2.  컴퍼넌트를 출력할 div#root 를 저장한뒤 (container) 

3.  ReactDOM.render 에서 컴포넌트를 컨테이너(div#root)에 출력합니다.

 

클래스 컴포넌트

클래스로 컴포넌트를 만들어 동작할 수도 있고 함수로도 가능합니다.

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

이전 강의에서 보았던 extends를 사용 하여 React.Component를 상속하고

내부 render 메소드를 오버라이드 해서 내용물을 바꿔서사용하게 됩니다.

 

동작 순서
1.  클래스 컴퍼넌트(<App/>를 생성하고   -- 리액트 기본을 출력
2.  컴퍼넌트를 출력할 div#root 를 저장한뒤 (container)
3.  ReactDOM.render 에서 컴포넌트(<App/>)를 컨테이너(div#root)에 출력합니다.

클래스 컴포넌트를 사용하면 this.props 속성을 사용할 수 있습니다.
이 속성은 컴포넌트를 선언을 할때 전달 합니다.

 

 

props로 앱 사용시마다 데이터를 전달할 수 있습니다.

 

컴포넌트의 기본적인 속성과 메소드

자주 사용하는 메소드

      class App extends React.Component {
        constructor (props) {
          super(props) //super() 부모 생성자를 호출합니다.
          // 생성자 코드 
        }
        render () {
          // 출력할 것
        }
        componentDidMount () {
          // 컴포넌트가 화면에 출력되었을 때 호출
        }
       
        componentWillUnmount () {
          // 컴포넌트가 화면에서 제거될 때 호출
        }
      }

우리가 변경해서 사용하는 속성으로 state가 있습니다.

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

 

시간을 출려하기에 stat에 현재 시간을 저장하며

setInterval()을 통해 1초마다 setset state에 새로운 시간을 저장합니다.

 

이벤트 연결하기

이벤트 연결 방법

1. 메소드를 선언 

2.메소드에 this를 바인드

3.render() 메소드에서 출력하는 태그에 이벤트 이름과 메소드 속성을 입력해서 연결

      class App extends React.Component {
        constructor (props) {
          super(props)
          this.메소드 = this.메소드.bind(this)  //메소드에 this를 바인드합니다.
        }

        render () {
          return <h1 이벤트 이름 = {this.메소드}></h1> //이벤트를 연결합니다.
        }

        메소드 (event) {
          메소드가 호출될때 실행할 코드
        }
      }

 

 

스타일 지정하기

 

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

state의 상태르 통해 true 면 blue , false 면 red 색을 출력합니다. 

 

컴포넌트 배열

컴포넌트 요소를 갖는 배열을 사용해서 여러개의 컴포넌트를 출력 할 수 있습니다.

 

일반적으로 state에 배열을 넣고 render 메소드에서 map 메소드로 배열을 출력합니다.

 

리액트와 데이터

여러개의 컴포넌트 사용하기

이번에는 Item 컴포넌트를 활용해봅시다.

 

App 컴포넌트에서 Item 컴포넌트로  value 속성만 전달하기

 

props로 받아서 value를 출력합니다