리액트 스터디 4탄) props

리액트를 다루는 기술을 참고하여 기술하였습니다.

---

jsx란?

jsx는 자바스크립트의 확장 문법이다.

브라우저에서 코드가 실행되기 전 여러개의 모듈들이 합쳐지는 코드 번들링을 하게 되며 이때, barbel을 이용해서 일반 자바스크립트 형태의 코드로 변환한다.

props

부모 컴포넌트에서 state를 전달 받을때 사용함.

const Mycomponent=(props)={
	return <div> 안녕하세요 제 이름은 {props.name} 입니다.</div>	
};

Mycomponent.defaultProps ={ name : '기본이름'};

export default Mycomponent;

이렇게 작성하게 되면, props가 없을 때도, 기본값을 정해줄수 있다.

컴포넌트이름.defaultProps ={};

props는 컴포넌트에서 데이터를 보내주는 방법이다.(app.js파일에서 하위 컴포넌트로 정보를 보내줄때, 사용하는 방법이라고 생각하면 좀 쉬울듯)

즉 부모컴포넌트에서 자식 컴포넌트로 데이터를 보내줄때, 사용하게 됨.

props.children

props에서는 부모 컴포넌트에서 자식컴포넌트로 데이터를 보내줄때, 사용하지만 이는 어떤 데이터가 들어오는지 확실히 알때, 사용가능하다.

하지만 그렇지 않을때는, children을 사용하게 된다.

• 단순히 말하면 컴포넌트 사이에 작성한 문자열이나, 값을 표현하기 위해서 사용한다.

function App()={
<div className='App'>
	<Container>
		<ul>
			<li>one</li>
			<li>two</li>
		<ul>
	</Container>
</div>
};

이런 app.js에서 Container이라는 컴포넌트에게 태그 사이에 있는 값을 보내고 싶을때, children을 사용하게 된다.

import React from 'react'

function Content({children}){
return (
	<div>
		<h2> anything</h2>
		{children}
	</div>
)};
export default Comtent

이렇게 되면, 처음 App.js에서 작성했던, ul태그 전체가 children props로 전달되고, 최종적으로 content는

import React from 'react'

function Content({children}){
return (
	<div>
		<h2> anything</h2>
		<ul>
			<li>one</li>
			<li>two</li>
		<ul>
	</div>
)};
export default Comtent

이와 같은 형태가 된다.

props의 타입 정의하기

props를 일정한 타입으로만 받고 싶을때 사용하는 것이다.

방법은 간단하다. defaultProps랑 동일하게 사용하면 되는데 우선 해야할것은 prop-types 를 import 해야한다.

import PropTypes from 'prop-types';

이후 프롭 타입을 정의해주면 된다.

Mycomponent.propTypes ={
name : PropTypes.string
};

이렇게 작성하면 name이라는 prop은 string 타입으로 밖에 입력 받지 못한다.

Uploaded by N2T