[생활코딩-React] 수업소개부터 render함수까지

 

React와 수업소개

component : 사용자 정의 태그

    - 장점 : 가독성, 재사용성, 유지보수

 

개발환경의 종류

1. 공식문서에 익숙해지기(reactjs.org/docs/getting-started.html)

2. npm : node js로 만들어진, 앱을 다운로드하기 위한 도구

 

npm을 이용해서 create react app 설치

npm : 프로그램 설치 

   + npx : 설치 없이 리액트 사용

          - 장점 : 항상 최신 버전으로 쓸 수 있으며 컴퓨터 공간을 덜 차지함

          - 단점 : 항상 다운받아야 하는 번거로움

 

샘플 웹앱 실행

• npm run start

      - Local : http://localhost:3000        

      - On Your Network:  http://192.168.1.101:3000

           : 개발 중인 앱을 확인할 수 있는 주소

• run 중단 : Ctrl+C

 

JS 코딩하는 법

• index.js : 진입 파일

      - <App> : 리액트로 만든 컴포넌트

      - document.getElementById('root') : index.html의 root를 가져와 실행시킴

※ 리액트는 반드시 하나의 태그 안에 나머지 태그가 들어가야 함

 

배포하는 법

실제 서비스 시엔 build 문서를 사용

   - 방법 : npm run build (build라는 디렉터리가 추가됨)

 

---

컴포넌트 만들기(1)

1. 컴포넌트를 만들 때 하나의 최상위 태그로 시작해야 함

 

props

기능 : 속성을 일괄적으로 적용할 수 있음. 사용자 정의 태그 ( attribute == props)

   예) this.props.title

 

Component 파일로 분리하기

1. src/components 폴더 생성

2. component_name.js 파일 생성

3. 해당 파일에서 component 에러 발생

    => import {Component} from 'react';

4. 컴포넌트를 다른 파일에서 쓸 수 있게 하는 export문 추가

   => export default App;

5. App.js에서 컴포넌트를 import

   => import Subject from "./components/Subject";

 

State 소개

state와 props

- props : 사용자가 제품을 조작하는 부분

    예) <Component props_name = "props_value">

- state : props값에 따라 내부 구현에 필요한 데이터

 

State 사용

props가 

   - 따옴표('') : 문자로 실행

   - 중괄호({}) : 자바스크립트 코드로 실행

[ state 사용방법 ]

1. constructor로 props 초기화, 함수 내부에서 초기화 내용 설정

2. return()에 있는 태그에서 {this.state. 컴포넌트명. 속성명}으로 constructor에서 설정한 초기화 내용을 사용

//component 초기화
  constructor(props){
   super(props);
    
    this.state = {
      Subject:{title:'WEB',sub:'World Wide Web!'}
    }
  }
 
<Subject 
    title={this.state.Subject.title} 
    sub={this.state.Subject.sub}>
</Subject>

 

[ key값 지정 방법 ]

1. App.js의 constructor에서 contents를 받아 data라는 변수로 TOC에 전달

2. TOC.js의 render()에서 data를 받아 lists에 넣음

3.. TOC.js의 return()에서 <ul> {lists} </ul>로 리스트 출력

 

이벤트 state props 그리고 render 함수

• 계획 : 링크 클릭 -> app 컴포넌트의 state가 바뀜 -> 바뀐 state가 props의 값으로 전달되면서 동적인 효과

 

• state 바뀜

      -> 그 state를 가진 컴포넌트의 render함수가 재호출 됨

      ->render() 함수 하위의 컴포넌트들의 render() 함수도 재호출 되면서 화면이 다시 그려짐

 

• render() : 어떤 html을 그릴지 결정하는 함수

 

constructor(props){
    super(props);
    
    this.state = {
      mode:'read',
      welcome:{title:'Welcome', desc:'Hello, React!!'},
          ...
    }
}
 
render(){
    //모드에 따른 화면 출력 변화
    var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    } else if(this.state.mode === 'read'){
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
        <Content title={_title} desc={_desc}></Content>
    )
}

• mode가 'welcome' 일 땐 welcome의 title과 desc를, mode가 'read'일 땐 contents[0]의 title과 desc로 바꿈

※ 복습

 - 동등 비교 : ===

 - JavaScript에선 세미콜론 필수

 - state 설정 시 삽입은 등호(=)가 아닌 콜론(:)

     + 로그 찍기 : console.log('로그 문구')