3. Component

hixkix59·2021년 11월 12일
0

React_Basic

목록 보기
2/8
post-thumbnail
  • 사용자가 보는 어플리케이션 인터페이스는 여러 컴포넌트로 구성됨
  • 각 기능에 따라 컴포넌트 생성 -> 따로 파일 생성해 저장/작업

Component

Component 생성

  1. MyComponent.js 파일 생성 후 MyComponent 컴포넌트 생성 코드
import React,{Component} from "react";

class MyComponent extends Component{
    render(){
        return(
            <div>
                나의새롭고 멋진 컴포넌트
            </div>
        )
    }
}

export default MyComponent;

export default MyComponent : 다른 파일에서 해당 파일 import하면, MyComponent 클래스 불러옴

Component가 다른 Component 불러와 사용하기

  1. App 컴포넌트에서 MyComponent 컴포넌트 불러오기
import React,{Component} from "react";
import MyComponent from './MyComponent'; 
{/**MyComponent 파일에서 불러오기 */}

class App extends Component{
  render(){
    return (
      <MyComponent/>
    )
  }
}

export default App;

출력 결과 :

App 컴포넌트가 MyComponent 컴포넌트 불러와 사용


props

  • properties 줄임말
  • 컴포넌트 속성 설정할 때 사용
  • 해당 component 불러와 사용하는 부모 요소에서만 props 값 변경 가능

JSX 내부 props 렌더링

props를 rendering 할 때 JSX 내부 {} 사용

  1. MyComponent 컴포넌트에서 name의 props rendering 하도록 설정
import React,{Component} from "react";

class MyComponent extends Component{
    render(){
        return(
            <div>
                안녕하세요.제 이름은 {this.props.name}입니다.
            </div>
        )
    }
}

export default MyComponent;

Component 사용시 props 값 설정

  1. MyComponent 컴포넌트의 name 속성값 설정
    (HTMl 태그의 속성 설정과 유사)

import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}

class App extends Component{
  render(){
    return (
      <MyComponent name="react"/>
    )
  }
}

export default App;

MyComponent에서의 name props를 기져와 다른 클래스에서 사용함.

출력 결과 :

  1. component props인 name에 할당된 값이 없는 경우
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}

class App extends Component{
  render(){
    return (
      <MyComponent />
    )
  }
}

export default App;

컴포넌트 가져와 랜더링해 보였던 부분이 그냥 공백으로 남겨짐

defaultProps : props 기본 값 설정

defaultProps : props 값을 지정하지 않은 경우에 따른 기본값 설정

  1. 클래스 내부에서 설정 - App component 내부
//App.js

import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}

class App extends Component{

  static defaultProps={
    name:"기본 이름"
  }

  render(){
    return (
      <MyComponent />
    )
  }
}

export default App;
//MyComponent.js
import React,{Component} from "react";

class MyComponent extends Component{
    render(){
        return(
            <div>
                안녕하세요.제 이름은 {this.props.name}입니다.
            </div>
        )
    }
}


export default MyComponent;
  1. 클래스 외부에서 설정 - .defaultProps 이용
//App.js 파일
import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}

class App extends Component{

  render(){
    return (
      <MyComponent />
    )
  }
}

export default App;
//MyComponent 파일
import React,{Component} from "react";

class MyComponent extends Component{
    render(){
        return(
            <div>
                안녕하세요.제 이름은 {this.props.name}입니다.
            </div>
        )
    }
}
MyComponent.defaultProps={
    name : '기본 이름'
}

export default MyComponent;

내부에서 설정하는 것이 코드가 더 깔끔함

propTypes : props 검증

  • 필수적인 props 지정
  • props type을 지정
  • propTypes 불러와 사용
  1. 클래스 밖에서 설정 가능

//MyComponent.js 파일
import React,{Component} from "react";
import PropTypes from 'prop-types';

class MyComponent extends Component{
    render(){
        return(
            <div>
                안녕하세요.제 이름은 {this.props.name}입니다.
            </div>
        )
    }
}
/*클래스 밖에서*/
MyComponent.propTypes={
    name : PropTypes.string 
    /*name props 타입을 문자열로 설정*/
}


export default MyComponent;
//App.js 파일

import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}

class App extends Component{

  static defaultProps={
    name:"기본 이름"
  }

  render(){
    return (
      <MyComponent />
    )
  }
}

export default App;
  1. 클래스 내부에서 transform-class-propetties 문법 사용해 설정
//MyComponent.js
import React,{Component} from "react";
import PropTypes from 'prop-types';

class MyComponent extends Component{
    //클래스 내부
    static defaultProps={
        //name props 기본값 설정
        name:"기본 이름"
    }
    static propTypes={
        name : PropTypes.string
        //name의 props type을 문자열로 설정
    }
    render(){
        return(
            <div>
                안녕하세요.제 이름은 {this.props.name}입니다.
            </div>
        )
    }
}




export default MyComponent;
//App.js

import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}

class App extends Component{



  render(){
    return (
      <MyComponent />
    )
  }
}

export default App;

Component 검증 해보기

  1. name props로 숫자 3 설정 : 오류 발생
    <MyComponent name={3}/>
    문자열 외 타입 값을 컴포넌트에 전달시 {} 필수

  2. name props로 문자열 "react" 설정 : 성공
    <MyComponent name="react"/>

필수 propTypes 설정

  • props 지정하지 않은 경우 오류창 띄움
  • isRequired 이용
  1. MyComponent 클래스에 age 를 필수 prop로 설정
//MyComponent.js
import React,{Component} from "react";
import PropTypes from 'prop-types';

class MyComponent extends Component{
    //클래스 내부
    static defaultProps={
        //name props 기본값 설정
        name:"기본 이름"
    }
    static propTypes={
        name : PropTypes.string,
        //name의 props type을 문자열로 설정
        age : PropTypes.number.isRequired
        //필수적 & 숫자 여야함
    }
    render(){
        return(
            <div>
                <p>안녕하세요.제 이름은 {this.props.name}입니다.</p>
                <p>저는 {this.props.age}살 입니다.</p>
            </div>
        )
    }
}




export default MyComponent;

랜더링은 되지만 콘솔창에서 age의 값이 설정되어 있지 않다고 경고 메세지 출력됨

  1. App 클래스에서 age 컴포넌트의 props 값 설정
    <MyComponent name="React" age={4}>

설정 가능한 propTypes 종류

배열참, 거짓함수숫자객체문자열ES6의 심벌 개체리액트 요소
arrayboolfuncnumberobjectstringsymbolelement

랜더링 가능한 것
(숫자, 문자열, element,
이로 구성된 배열)
특정 클래스의 인스턴스아무 종류
nodeinstanceOf(Myclass)any

주어진 배열 요소 중 값 하나주어진 배열 안의 종류 중 하나주어진 종류로 구성된 배열주어진 종류의 값을 가진 객체주어진 스키마를 가진 객체
oneOf(["Male","Female"])oneOfType([React.PropTypes.string,React.ProTypes.number])arrayOf(React.PropTypes.number)objectOf(React.PropTypes.number)shape({name : React.PropsTypes.string, age : React.PropsTypes.number})

defaultPropspropsTypes는 필수적이지 않지만 큰 규모의 프로젝트나 개발자 협업 시 사용하면 해당 component에 어떤 props가 필요한지 쉽게 알 수 있음

state

  • 컴포넌트 내부에서 바뀔 수 있는 값
  • 클래스형 컴포넌트 state
  • 함수형 컴포넌트 useState(Hooks)

컴포넌트 생성자 메서드 : constructor()

  • 생성자 메서드 constructor 이용해 state 초기값 설정
class MyComponent extends Component{
	(...)
    constructor(props){
    super(props);
    }
    render(){
    (...)
    }
}
  • MyComponent가 Component 상속함 -> 별도의 constructor 메서드 생성 X -> Component의 생성자 메서드 사용
  • 직접 constructor 생성시 -> Component의 contructor 매서드 호출 (super 사용) -> component 생성시 메서드로 사용되는 props 전달

state 초깃값 설정

  • constructor 메서드 안에 state의 number 초깃값으로 0 지정
class MyComponent extends Component{
(...)
     constructor(props){
         super(props);
         this.state={
             number:0
         }
     }
(...)
}

JSX 내부에서 state 랜더링

  • 설정한 state의 number 초기 값을 JSX 안에서 랜더링
    render(){
        return(
            <div>
                <p>안녕하세요.제 이름은 {this.props.name}입니다.</p>
                <p>저는 {this.props.age}살 입니다.</p>
                <p>숫자 : {this.state.number}</p>
            </div>
        )
    }

state 값 업데이트 : setState()

this.setState({
수정할 필드 이름 : 값,
수정할 또 다른 필드 이름 : 값
});

  • 버튼 1개 랜더링 -> 누를 때마다 number 값 +1
    render(){
        return(
            <div>
                <p>안녕하세요.제 이름은 {this.props.name}입니다.</p>
                <p>저는 {this.props.age}살 입니다.</p>
                <p>숫자 : {this.state.number}</p>
                <button onClick={()=>
                    this.setState({ 
                    /*버튼 누르면 this.setState() 실행하는 함수 실행됨*/
                        number : this.state.number+1
                    })
                }>
                    더하기
                </button>
            </div>
        )
    }

state를 constructor에서 꺼내기

  • transform-class-properties 문법 이용해 constructor 밖에서 state 정의 가능
import React,{Component} from "react";
import PropTypes from 'prop-types';

class MyComponent extends Component{
    //클래스 내부
    static defaultProps={
        //name props 기본값 설정
        name:"기본 이름"
    }
    static propTypes={
        name : PropTypes.string,
        //name의 props type을 문자열로 설정
        age : PropTypes.number.isRequired
        //필수적 & 숫자 여야함
    }

    state={
        number:0
    }
    render(){
		(...)
    }
}
export default MyComponent;

state 값을 업데이트시 주의사항

  • .setState로만 state를 업데이트 해야함
  • .setState :
  1. 파라미터 전달 받음
  2. 해당 필드 update
  3. component re-rendering 트리거
  • 주의
    this.state.number=this.state.number+1처럼 직접 접근해 값을 수정하는 경우 자동으로 re-rendering 트리거 되지 않음

0개의 댓글