[React:리엑트] modal 구현하기

이번 포스팅에서는 React를 이용하여 modal을 구현해보는 시간을 가져보겠다. 개발 시간을 단축하고자 개발환경은 codepanio(http://codepen.io)를 사용했다. 처음부터 하나씩 구현해보도록 하자. 

• React-hook
• React-Dom

을 이용하여 구현 해볼 예정이니, 관련해서 이상한부분 있으면 댓글로 남겨주시면 친절하게 답변해 드릴 예정이니 편하게 댓글 남겨주시면 된다 :)

 

프로젝트 생성하기 

https://codepen.io/ 링크 따라 들어가면 다음과 같은 화면을 볼수 있다

좌측 상단에 Pen 버튼을 클릭하면 프로젝트를 생성할 수 있다.

이제 프로젝트는 생성이 완료되었으니, 모듈들을 설치해주자 우리가 설치해야 할 모듈들은 React, React-dom이다.

설치방법은 다음과 같다 우측 상단의 Settings 버튼을 클릭해주자 

React는 babel로 변환해줘야 하므로 Preprocessor를 babel로 맞춰주고 react, react-dom을 추가해주면 된다. 추가가 완료되면 하단의 save & close 버튼을 클릭하여 종료 후에 나가주면 된다.

이렇게 모든 프로젝트 환경 세팅이 완료되었다. 이제 코딩할 일만 남았다. :)

 

모달 만들기

• 최초 작성해야 하는 부분은 역시 html이다 html에 react를 랜더링 할 dom을 먼저 생성하자. 
  

  <div id="root"></div>​

• html을 작성했다면 react-dom을 사용해서 랜더링 한 react 가상 돔을 붙여주면 된다.
  

  const App = () => {
    return (
      <div> App </div>
    )
  }
  
  ReactDOM.render(
   <App/> ,
    document.getElementById('root')
  )​

  
  

  

  App Component가 렌더링 되는 모습을 확인할 수 있다. 
• 모달 이외의 영역은 딤처리가 되어야 하고, 모달 안의 영역은 변경이 가능해야 한다. 그래서 div> div 형식으로 하여 부모 div가 모달 이외의 영역이 될 것이고, 자식 div는 모달이 될 것이다. 코드 로보면 이해가 훨씬 쉬울 수 있다. 코드로 확인해보자.
  

  생성 </button> () => {
     return(
      <>
         <div class="dim"> </div>  
         <div class="modal"> 
          <div> <button onClick={ () => { onOff(false)}}> X </button>  </div>
          <div> 모달 만들기 성공! </div>
         </div>
      </>
     )
    
  }
  
  const App = () => {
    return (
      <div>
        <button> 모달 생성</button>
        <Modal/>
      </div>
    )
  }
  
  ReactDOM.render(
   <App/> ,
    document.getElementById('root')
  )​

  
  

  

  간단하게 모달 구조를 만들어보았다. 
• 모달을 ON/OFF 할 수 있는 스크립트를 생성해보자. useState를 활용하면 쉽게 구현할수 있다. 상태변경함수를 props로 넘겨줘서 모달에서도 off 할수 있도록 하자 
  

  const Modal = ( {onOff} ) => {
     return(
      <>
         <div class="dim"> </div>  
         <div class="modal"> 
          <div> <button onClick={ () => { onOff(false)}}> X </button>  </div>
          <div> 모달 만들기 성공! </div>
         </div>
      </>
     )
    
  }
  
  const App = () => {
    const [ isOn, setIsOn] = React.useState(false);  
    
    return (
      <div>
        <button onClick= { () => setIsOn(!isOn)}> 모달 생성</button>
        { isOn ? <Modal onOff={setIsOn}/> : ''}
      </div>
    )
  }
  
  ReactDOM.render(
   <App/> ,
    document.getElementById('root')
  )​

  
  
  
• 거의 다 왔다 이제 CSS를 활용하여 실제 모달처럼 만들어주면 하면 된다. 이때 중요한 건 postition : fixed를 활용하면 쉽게 구현할 수 있다. absolute도 있지만, fixed를 활용하면 스크롤이 된다는 장점이 있기 때문이다. css를 바로 코딩해보자
  
  

  . modal height : 100%;
    width : 100%;
    
  }
  .dim {
    position:fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }
  
  .modal {
    position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius : 1rem;
    padding : 1rem;
    color : black;
  }​

  
  

  

  모달 생성시 모습

정리 및 느낀 점

• 이번 포스팅에서는 React 모달을 만드는 방법에 대해 알아보았다. 
• Modal은 css와 js 모두 적절하게 사용하면 쉽게 구현할 수 있다. 
• 전체 소스는 https://codepen.io/ckdtjs505/pen/YzxGzVQ?editors=0110 에서 확인이 가능하다.