react component로 modal창 구현하기

TOC

1. 원하는 것

2. 어떻게 할지

1. 원하는 것

부모 component에서 자식 component를 state값의 변경으로 껏다 켰다하는 modal UI를 만드는 것.

2. 어떻게 할지

기존에 구현했던 modal UI는 해당 component위치에 함께 위치하며 className을 삼항연산자로 바꾸어가며 toggling을 함으로써 껏다 켜지는 효과를 주었었다.

하지만 이번에는 component 자체를 보였다 안보였다 해주어야 하기 때문에 아래와 같은 것들의 개념이 필요하다.

1. 조건부 렌더링
   -> 조건부 렌더링은 특정 조건이 맞으면 렌더링을 해주고 아닌 경우에는 null값을 반환해 실질적으로 렌더링을 해주지 않는 것.

const Parent=()=>{
	const [condition,setCondition]=useState(false);
	return(
	<>
		{condition ? {<div>hello?</div>} : null}
	</>
	)
}

위의 코드의 경우 condition의 값이 false이므로 null이 반환되어 렌더링되지 않는다.

&&등의 사용도 가능하므로 나중에 사용해보자.

2. props
   정확히 말하면 child component에서 부모 state를 변경해줄 props를 말한다.

const Parent=(props)=>{
const [condition,setCondition]=useState(true);
	return(
	<div>
	{condition ? (Child props.condition={condition} props.setCondition={setCondition}) : null />
	</div>
	)
}

const Child=(props)=>{

	return(
	<div onClick={()=>setCondition(!condition)}>hi</div>
	)
}

위 코드의 핵심은 condition의 useState를 set해줄 setter를 child component에 넘겨주어 child에서부터 그 값이 부모 component에게로 전달된다는 점이다.

위 코드를 실행해본다면 hi를 눌렀을 때 condition의 값이 변경되어 부모 component의 condition 삼항연산자의 조건이 깨지게 되어 null값을 리턴하게 되어 화면의 내용이 다 사라지게 된다

구현은 포폴이 완성되면 그 때 올리도록 하겠다. 현재는 너무 못생겼기 때문에...