3. Component

히치키치·2021년 11월 12일

React component

React_Basic

목록 보기

2/8

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

Component

첫 컴포넌트 생성

Component 생성

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 불러와 사용하기

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 내부 {} 사용

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 값 설정

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를 기져와 다른 클래스에서 사용함.

출력 결과 :

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 값을 지정하지 않은 경우에 따른 기본값 설정

클래스 내부에서 설정 - 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;

클래스 외부에서 설정 - .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 불러와 사용

클래스 밖에서 설정 가능


//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;

클래스 내부에서 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 검증 해보기

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

필수 propTypes 설정

props 지정하지 않은 경우 오류창 띄움
isRequired 이용

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의 값이 설정되어 있지 않다고 경고 메세지 출력됨

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

설정 가능한 propTypes 종류

배열	참, 거짓	함수	숫자	객체	문자열	ES6의 심벌 개체	리액트 요소
array	bool	func	number	object	string	symbol	element

랜더링 가능한 것 (숫자, 문자열, element, 이로 구성된 배열)	특정 클래스의 인스턴스	아무 종류
node	instanceOf(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})

defaultProps와 propsTypes는 필수적이지 않지만 큰 규모의 프로젝트나 개발자 협업 시 사용하면 해당 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 :

파라미터 전달 받음
해당 필드 update
component re-rendering 트리거

주의
this.state.number=this.state.number+1처럼 직접 접근해 값을 수정하는 경우 자동으로 re-rendering 트리거 되지 않음

히치키치

이전 포스트

2. JSX

다음 포스트

3. Component

React_Basic

Component

Component 생성

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

props

JSX 내부 props 렌더링

Component 사용시 props 값 설정

defaultProps : props 기본 값 설정

propTypes : props 검증

필수 propTypes 설정

설정 가능한 propTypes 종류

state

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

state 초깃값 설정

JSX 내부에서 state 랜더링

state 값 업데이트 : `setState()`

state를 constructor에서 꺼내기

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

2. JSX

4. Event Handling

0개의 댓글

3. Component

React_Basic

Component

Component 생성

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

props

JSX 내부 props 렌더링

Component 사용시 props 값 설정

defaultProps : props 기본 값 설정

propTypes : props 검증

필수 propTypes 설정

설정 가능한 propTypes 종류

state

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

state 초깃값 설정

JSX 내부에서 state 랜더링

state 값 업데이트 : setState()

state를 constructor에서 꺼내기

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

2. JSX

4. Event Handling

0개의 댓글

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

state 값 업데이트 : `setState()`