Props?

props는 부모 컴포넌트에서 자식 컴포넌트에게 특정 값을 보내는 방법 입니다!
props의 주의 사항은 부모에서 자식으로 값이 전달은 되나
자식에서 부모게에로는 값이 전달되지는 않습니다!

props 전달 방법

불러온 컴포넌트 태그 내부에 propertyName과 value로 전달합니다!

<Hello properyName = 'Value' />
<Hello name = '코린이' color = 'red' />

props 받는 방법

사용한 컴포넌트 file에서 받아서 props라는 이름으로 사용할 수 있습니다!

function Hello(props) {
	console.log(props); {/*props 정보를 출력*/}
	return <div>안녕하세요</div>;
}

props 값 사용 방법

보낼 때 지정한 propertyName을 사용하여 props를 사용할 수 있습니다!

function Hello(props) {
	return <div>안녕하세요. {props.name}</div>;
}

2. style 값으로 받아 사용할 경우

function Hello(props) {
	return <div style={{
			color : props.color
			}}>안녕하세요. {props.name}</div>;
}

3. props 비구조 할당

function Hello({name, color}) {
	return <div style={{
            color : color
          }}>안녕하세요. {name}</div>;
}

비구조 할당을 할 경우 사용할 때 마다 props를 작성 안해줘도 돼서
꽤 자주 많이 사용하므로 이해하면 좋습니다!

props를 전달 받지 않고 기본값 지정하는 방법

props 값을 받아와서 사용을 하는게 보편적이지만 기본적으로 할당 할 수도 있습니다!
주의 사항은 function 외부에서 작성을 해주어 사용해야 합니다!

Hello.defaultProps={
	name : '이름없음',
}

컴포넌트명.defaultProps = {
property : value,
}

props.children 사용하는 방법

컴포넌트 태그를 사용할 때 기본적인 HTML 태그가 아니라
컴포넌트 태그 내부에서 사용하면 감싼 컴포넌트 내용이 보여지기 때문에
컴포넌트 태그 내부에서 컴포넌트를 조회할 때 사용합니다!

function App() {
	return (
		<Wrapper>
            <Hello name="react" color="red" />
            <Hello color="pink" />
		</Wrapper>
	);
}

Wrapper 태그안에 Hello 태그를 입력할 경우
Hello의 내용이 아닌 Wrapper의 내용이 보여지니
Wrapper을 수정 해볼 까요!

function Wrapper({children}) {
        const style = {
            border : '2px solid black',
            padding : 16
        };
        return <div style={style}>{children}</div>
}

비구조 할당을 통해서 자식 컴포넌트를 갖고 오는데요!
children은 저희가 지정을 해주지는 않았지만
기본적으로 지정되어 있기 때문에
다른 props를 사용할 때 처럼 사용하시면 됩니다!

조건부 렌더링

특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 방법
boolean 값을 전달 할 때 단순히 propsName만 전달할 경우 true로 간주 됩니다!

return(
	<>
    	<Hello name="react" color="red" isSpecial />
    </>
)

function Hello({color, name, isSpecial}) {
        return (
        <div style={{ color : color }}>
            {isSpecial ? <b>*</b> : null}
            안녕하세요. {name}
        </div>
        )
}

이번에 삼항연산자를 사용해서 만약에 isSpecial이 참이면 *이 출력되고
만약에 거짓이면 아무것도 출력을 안합니다!

function Hello({color, name, isSpecial}) {
        return (
        <div style={{ color : color }}>
            {isSpecial &&<b>*</b>}
            안녕하세요. {name}
        </div>
        )
}

단순히 숨기고 보여야 하는 경우에는 and 연산을 사용하시는 부분을 추천 드려요!

function Hello({color, name, isSpecial}) {
        return (
        <div style={{ color : color }}>
            <b>{isSpecial?"스페셜하다!":"낫스페셜"}</b>
            안녕하세요. {name}
        </div>
        )
}

하지만 값에 따라 내용이 바뀌어야 한다면 삼항연산자를 사용하면 좋습니다!