[React_study] 리액트 환경에서 동적인 UI 만드는 법

* 리액트에서 동적인  UI 만드는 step

- 동적인 UI는 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등등의 UI들을 의미한다.

 

1. html, css를 이용해 미리 UI디자인을 만들어놓는다.
2. UI의 현재 상태를 state를 이용해 저장해둔다.
3. state에 따라서 UI가 어떻게 보일지 조건문을 이용해 작성한다.

 

* 모달창을 이용한 동적인 UI 예시 코드

* html, css 디자인

<div className="modal">
  <h4>Title</h4>
  <p>Date</p>
  <p>Content</p>
</div>

.modal{
  margin-top : 20px;
  padding : 20px;
  background : #eee;
  text-align : left;
}

 

 

*  UI의 현재 상태를 state로 저장

let [modal, setModal] = useState(false);

(state변경함수는 set을 앞에 붙이는게 관습이다.)

(state에는 어떠한 자료를 넣어도 된다.)

 

let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(0);

 

아무렇게나 표현해도 상관없다.

위 예시는 true/false로 표현해볼 것이다.

 

* state에 따라서 UI가 어떻게 보일지 작성

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

(참고) JSX에서 사용하는 조건문 : 삼항연산자

조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 

3 > 1 ? console.log('맞음') : console.log('아님') 

 

* 글제목 클릭시 모달창 띄워주기

- 글제목 클릭시 modal이라는 state를 true로 바꾸는 코드

function App (){

  const [modal, setModal] = useState(false);
  const [title, setTitle] = useState('Blog-Title');
  
  return (
    <div>
      <button onClick={ ()=>{ setModal(true) } }> { title } </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

* 한번 더 클릭시 모달창이 사라지게 하기

- 지금 state가 true면 setModal(false)

- 지금 state가 false면 setModal(true)

function App (){

  const [modal, setModal] = useState(false);
  const [title, setTitle] = useState('Blog-Title');
  
  return (
    <div>
      <button onClick={ ()=>{ modal === false ? setModal(true) : setModal(false); } }> { title } </button>
      { 
         modal === true ? <Modal></Modal> : null
      }
    </div>
  )
}

 

function App (){

  const [modal, setModal] = useState(false);
  const [title, setTitle] = useState('Blog-Title');
  
  return (
    <div>
      <button onClick={ ()=>{ setModal(!modal) } }> { title } </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

- 위와 같이 간단하게도 가능하다.

 

---

[결론적으로]

리액트는 자바스크립트로 UI 만드는 것과는 약간 방식이 다르다. 순수 자바스크립트는 html을 조작해야했는데

리액트환경에선 html을 직접 조작하지 않는다.

 

그래서 리액트에서 UI만드는 과정을 비유하면

스위치와 전등만드는거랑 비슷하다고 보면 된다.

 

1. 일단 전등을 달아놓고

2. 스위치랑 연결하고

3. 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록 만들어 놓기

 

그리고 나중에 필요하면 스위치 조작만 하면 되는 것임 

스위치는 state, 전등은 <Modal>입니다.