[리액트 React] props 사용하기 / 클래스형 컴포넌트 props / 함수형 컴포넌트 props

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

이 포스팅은 리액트 포기하기 싫어서 억지로 쓰는 포스팅입니다.

 

저는 아직 함수형 컴포넌트/클래스형 컴포넌트에 익숙하지 않아서

연습겸 두 종류의 컴포넌트를 다 작성해서 보여드릴 예정입니다.

제 머릿속에 나온 것이라 정답은 아니겠지만, 확실한 건 구현이 됩니다.

글을 보시다가 더 좋은 의견이 있으시거나, 제가 잘못 작성한 점이 보이신다면 아량을 베푸셔서 댓글로 남겨주세요.

감사히 받아들이고 발전하겠습니다.

 

이전에 작성했던 글과 겹치는 부분이 좀 있을 거예요.

그럼에도 이렇게 또 props에 관한 글을 적는 이유는 그만큼 props를 완전히 이해하고 온전한 제 것으로 만들기 위함입니다.

이 글을 보시게 되는 분들도 저와 같은 마음이라면 아래의 글을 한번 보고 해당 글을 읽기를 권합니다.

[리액트 react] 컴포넌트의 속성을 지정하는 법 / Props

 

 

 

  Props

• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다.
• 자식 컴포넌트에서는 전달 받은 props를 수정할 수 없다.
• 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어서 사용해야 한다.

 

 

 

1. App.js 작성하기

import React from 'react';
import './App.css'
import Props from './UseProps';

function App() {
	return(
		<div>
			<Props props_val="TookTak"/>
		</div>
	)
}

export default App;

 

 

 

2-1. 클래스형 컴포넌트 버전 UseProps.js  작성하기

import React, { Component } from 'react';

class R017_Props extends Component {
    render () {
        let props_value = this.props.props_val;
        props_value += ' from App.js'
        return (
            <div>{props_value}</div>
        )
    }
}

export default R017_Props;

 

 

 

2-2. 함수형 컴포넌트 버전 UseProps.js 작성하기

import React from 'react';

function R017_Props (props){
    let props_value = props.props_val;
    props_value += ' from App.js'
    return (
        <div>{props_value}</div>
    )
}

export default R017_Props;

 

 

 

3. 완성된 모습