Next.js
Next.js 에서 컴포넌트 함수로 만들어 쓰기(한페이지 에서)
flykimjiwon
2022. 3. 22. 19:04
반응형
box.js
export default function Layout(){
return <>
<R1></R1>
</>
}
function R1(props){
// return(
// <div>hihi {props.ramen1}</div>
// )
if(props.ramen1===0){
return <div style={{display:"inline"}}></div>
}else if(props.ramen1===1){
return <div style={{display:"inline"}}><img src="icon/bongji.png" width={45}></img></div>
}else if(props.ramen1===2){
return <div style={{display:"inline"}}><img src="icon/cup.png" width={45}></img></div>
}
}
위와 같이 사용할 수 있다.
box.js
export default function Layout(){
return <>
<R1></R1>
</>
}
이게 기본적인 형태라고 보면 저 Layout안에다가 새로운 컴포넌트를 따로 만들어서 쓰고싶다.
다른 페이지에 만들어도 되겠지만 한페이지에서 불러오려면
function R1(props){
// return(
// <div>hihi {props.ramen1}</div>
// )
if(props.ramen1===0){
return <div style={{display:"inline"}}></div>
}else if(props.ramen1===1){
return <div style={{display:"inline"}}><img src="icon/bongji.png" width={45}></img></div>
}else if(props.ramen1===2){
return <div style={{display:"inline"}}><img src="icon/cup.png" width={45}></img></div>
}
}
이와같이 만들어 쓸 수 있다.
그냥 return을해서 일반 페이지를 사용하려면 그렇게 하면되고
조건문을하려면 아래와같이 조건문을 주면된다.
단, 특정 조건에서 return문이 없으면 오류가 날 수있으니 주의하자
반응형