[React.js] React.js 4편 Props

React.js Props

---

필자는 동영상 강의를 듣고 있는데 강의하는 사람이 무척무척 중요한 개념이라고 한다. Props가 먼지 알아보자!!

props는 부모의 값을 자식에게 전달해서 알려주는 것이다. 이제 사용법을 알아보자

class MyName extends Component{

render(){

    return <div>

        지금 공부하고 있는 기술은 <b>{this.props.name}</b>이야

            </div>

        }

}

여기서 보이는 this.props.name을 받아오는 방법이 세개정도 있다. 

1. 이 파일을 호출하는 곳에 값을 넣기  

APP.JS를 한번 보자.  여기서 MyName이라고 호출하고 있는데 MyName안에 name = "react.js"라고 적어주면 된다. 

class App extends Component {

render() {

return <MyName name="react.js"/>

}

}

2. class안에 static으로 만들어주기 

class MyName extends Component{

static defaultProps = {

name:"react.js"

}

render(){

return <div>

지금 공부하고 있는 기술은 <b>{this.props.name}</b>이야

</div>

}

}

3. class 밖에 작성하여 적용해주기 

MyName.defaultProps = {

name:"react.js"

}

결과

하지만 이와같이 클래스로 작성을 해주어도 되지만 이렇게 단순한 기능이 있는 것은 함수로 사용해도된다. 그리고 함수로 사용하면 미세하게나마 속도는 물론 메모리도 절약할 수 있다. 이제부터 함수형 컴포넌트로 만들어 보겠다. 

const MyName = ({name})=>{

return <div>안녕 오늘 배울 기술은 <b>{name}</b>야</div>

}

이런식으로 사용하면 되고 위에 있는 적용기술은 모두 사용할 수 있다. !!!!