[React] 메뉴 클릭에 따라 특정 화면만 변경하기

메뉴를 클릭할 때마다 전체 페이지가 이동해서 바뀌는 것이 아니라
특정 화면만 바뀌도록 만들어보겠습니다 ~.~
아래 이미지가 완성된 결과물입니다.

결과물

 

코드 설명

우선 메뉴 클릭에 따라 보여줄 html 코드를 한 파일에 다 짜기에는 너무 길기 때문에 나눠줍니다.
저는 메뉴별로 js파일로 나누어서 따로 저장했습니다. 
그리고 이 파일들을 import로 불러옵니다. 

import Own_contents from "./own_contents"; // 내가 쓴 글 메뉴 파일
import Like_contents from './like_contents'; // 좋아요한 글 메뉴 파일

 
메뉴를 클릭할 때 userState로 만든 change변수의 값을 변경합니다.

let [change, setChange] = useState('own_contents');

<li>
  <p onClick={ () => { setChange('own_contents') } }>내가 쓴 글</p>
</li>
<li>
  <p onClick={ () => { setChange('like_contents') } }>좋아요한 글</p>
</li>
<li>
  <p onClick={ () => { setChange('plant_album'); } }>내 식물앨범</p>
</li>

 
위에서 바꾼 change 변수값에 따라서 return할 값을 정해줍니다.
return문 안에서 따로 분리해둔 컴포넌트 파일을 불러옵니다.
이렇게 하면 변수값이 바뀔 때마다 return문이 달라지기 때문에 각 메뉴에 따라 화면을 바꿀 수 있습니다!

 function menu_component() {
    if ( change === 'own_contents') {
      return(
        <>
          <Own_contents></Own_contents>
        </>
      )
    } else if ( change === 'like_contents') {
      return(
        <>
          <Like_contents></Like_contents>
        </>
      )
    } else {
      return(
        <>
          <Like_contents></Like_contents> { /*식물 앨범 메뉴는 아직 제작을 못해서 다른 파일로... */ } 
        </>
      )
    }
  }

 
리액트 컴포넌트의 return문 안에서 위에서 만든 menu_component() 함수를 불러옵니다.
이렇게 하면 <div></div>내에서 menu_component함수의 return값을 보여줄 수 있습니다.

return(
    <>
      {/* 위 메뉴 클릭에 따라 달라지는 화면 구현 */}
      <div>
        {menu_component()}
      </div>
    </>
  );

 

최종코드

/* user_info.js */

import React, { useState, useEffect } from 'react';

import Own_contents from "./own_contents"; // 내가 쓴 글 메뉴 파일
import Like_contents from './like_contents'; // 좋아요한 글 메뉴 파일


function User_info() {
 
  // 현재 menu_component의 상태를 설정하는 변수
  let [change, setChange] = useState('own_contents');

  function menu_component() {
    if ( change === 'own_contents') {
      return(
        <>
          <Own_contents></Own_contents>
        </>
      )
    } else if ( change === 'like_contents') {
      return(
        <>
          <Like_contents></Like_contents>
        </>
      )
    } else {
      return(
        <>
          <Like_contents></Like_contents> { /*식물 앨범 메뉴는 아직 제작을 못해서 다른 파일로... */ } 
        </>
      )
    }
  } 
  
  useEffect(() => { menu_component(); }, [change])
 
  return(
    <>
      <div>
        <div className='menu'>
          <ul className='menu_list'>
            <li>
              <p onClick={ () => { setChange('own_contents') } }>내가 쓴 글</p>
            </li>
            <li>
              <p onClick={ () => { setChange('like_contents') } }>좋아요한 글</p>
            </li>
            <li>
              <p onClick={ () => { setChange('plant_album'); } }>내 식물앨범</p>
            </li>
          </ul>
        </div>

        {/* 위 메뉴 클릭에 따라 달라지는 화면 구현 */}
        <div>
          {menu_component()}
        </div>

      </div>
    </>
  );
}

export default User_info;