Next.js 에서 컴포넌트 함수로 만들어 쓰기(한페이지 에서)

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문이 없으면 오류가 날 수있으니 주의하자