React(3) 컴포넌트로 동적인 UI 만들기(삼항연산식을 곁들인)

1. 컴포넌트에 대해

- 컴포넌트란?

- 컴포넌트 사용법

- 갑자기 든 의문점

2. 동적인 UI 만들기

- 삼항연산식

 

---

• 글을 누르면 상세페이지(모달창)가 뜨게끔 하려고 한다! (완전히 페이지가 전환되는 것은 후에, router를 배우게 되면 할 것임)

※ 팝업창 VS 모달창
- 팝업창 : 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것을 말한다.
- 모달창 : 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다

• 컴포넌트를 배운다면, 처음보는 사람도, <MyModal/>이라고 호출되는 것을 보고,
  "아, 모달창이구나!" 하며, 쉽게 알 수 있으니, 배워보도록 하자!

---

컴포넌트에 대해

🤷‍♂️ 컴포넌트란 ?

• 리액트로 만들어진 앱을 이루는 최소한의 단위로서, 보통 리액트로 만든 웹(앱)들은 여러 개의 컴포넌트들로 구성한다.
• 컴포넌트에는  ① 함수형 컴포넌트 ② 클래스형 컴포넌트 두가지 종류가 있다.
  1. 함수형 컴포넌트
     • 함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트로,
       함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환한다.
     • state, lifeCycle 관련 기능사용이 불가능하고 메모리 자원을 덜 사용한다.
       -> 이제 가능해짐! 따라서, 직관적인 코드와 메모리효율 측면에서 너무나 유용하기에,
       리액트에서도 함수형컴포넌트 사용을 적극 권장한다.
       

       function App() {
         return (
         	// jsx  
         )
       }

       const App = () => {
         return (
         	// jsx  
         )
       }

  2. 클래스형 컴포넌트 
     • 클래스 컴포넌트는 말 그대로 자바스크립트의 "클래스(class)" 기반 컴포넌트로,
       class로 정의하고, render() 함수에서 JSX 코드를 반환한다.
     • class 키워드가 필수로 들어가며 Component로 상속을 받아야하고 render 메서드가 반드시 있어야한다.

       import React, { Component } from 'react'
       
       class App extends Component{ 	
         render() {     	
           return ( 
             	// jsx            
           	); 	
          } 
       }

---

컴포넌트 사용법

 

• 글을 누르면 상세페이지가, 모달창(레이어창)으로 뜨게끔 할것이다!

<div className="modal">
        <h3>제목</h3>
        <span>날짜</span>
        <span>상세내용</span>
</div>

• 위 내용을 모달창으로 추가하도록 할건데,
  이 때, 간단한 모달창 내용인데도 불구하고, 태그들이 너무 많아져서 더러워지는 경험을 겪을 수 있다.
  그럴 때 사용하는것이 component 문법이다.
• (함수형) 컴포넌트 만드는 법
  1. function 을 선언한다 
     • app() funtion{} 밖에다가 만들 것!!!
     • 맨 첫번째 글자는 대문자로 만들것!
       (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.)
  2. return() 안에 html 담고
     

     function Modal(){
     	return(
         	<div className="modal">
             	<h3>제목</h3>
             	<span>날짜</span>
             	<span>상세내용</span>
             </div>
         )
     }

  3. <컴포넌트명></컴포넌트명> (or <컴포넌트명/>) 으로 호출하기
     

     function App() {
     	return(
         <Modal><Modal/>
         // 혹은 <Modal/>로도 호출 가능하다.
         )
     }

      

( 우리가 코딩하는 index.js의 App()이라는 것도 컴포넌트 이었다! )

 

※ 참고 : div를 같은 병렬 공간에 쓰고싶을때는
- 의미없는 div를 선언하여 그 안에다가 쓰거나

import "./App.css";

function App() {
  return (
    <div className="의미없는_div">
      <div>

      </div>
      <Modal></Modal>
    </div>
  );
}

- 빈 꺽쇠 <> </>를 사용하기 -> fragment라고 일컫음

import "./App.css";

function App() {
  return (
    <>
      <div>

      </div>
      <Modal></Modal>
    </>
  );
}

---

🤷‍♂️ 갑자기 든 의문점

✏️ 왜 App.js에 있는 화면이 메인으로 띄워질까?

• 리액트는 번들러를 활용하는데, 리액트에서는 webpack이라는 번들러를 주로 사용한다.
• node_modules에 가 보면 webpack이 알아서 설치되어 있음을 확인할 수 있다.

※ 번들러
- 번들러에는 webpack, Parcel, browserfiy 등이 있다.
- 번들러를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다.
- 최적화 과정에서 여러 개의 파일로 분리할 수도 있다.
- 리액트에서는 주로 webpack을 사용한다.

• webpack은 가장 처음으로 읽어들이는 entry point부터 시작하여, 필요한 모든 모듈을 다 불러온 뒤 번들(하나의 결과물)로 만들어,
  한 파일로 합쳐서 bundle.js 에 저장하는 역할을 한다.
• webpack 설정파일에 가 보면 entry point가 index.js로 정의되어 있을 것 이다!!

✏️ 어떨 때 컴포넌트를 쓰는가?

1. 반복적인 html을 축약할 때!
2. 큰 페이지들을 전환해야할 때, 혹은, 큰 페이지 자체를 컴포넌트로 만들 때!
3. 자주 변경되는 UI들일 때!

---

동적인 UI 만들기

• 만든 모달(컴포넌트)창을, 동적인 UI로 만들어 보자!
  • 만들기 전에 알아야할 지식 : 삼항연산자 (ternary operator)
    조건식 ? true일때 실행할 것 : false일때 실행할 것
    ex) age > 27 ? "틀딱" : "오우 MZ한데요?"
    
• 동적인 UI로 만드는 법
  1. html과 css로 미리 디자인을 완성시켜놓는다
  2. UI의 현재 상태를 state로 저장해 놓는다.

     import "./App.css";
     import { useState } from "react";
     
     function App() {
       let [modal, setModal] = useState(false);
       return (
         <>
           <div>
             홈페이지
           </div>
           <Modal></Modal>
         </>
       );
     }
     
     function Modal(){
       return (
         <div className="modal">
           <h3>제목</h3>
           <span>날짜</span>
           <span>상세내용</span>
         </div>
       );
     }
     
     export default App;

  3. state에 따라 UI가 어떻게 보일지 작성한다.

     import "./App.css";
     import { useState } from "react";
     
     function App() {
       let [modal, setModal] = useState(false);
       return (
         <>
           <div onClick={()=>{ setModal(true)}}>
             홈페이지
           </div>
           {
             modal == true ? <Modal/> : null
           }
     
         </>
       );
     }
     
     function Modal(){
       return (
         <div className="modal">
           <h3>제목</h3>
           <span>날짜</span>
           <span>상세내용</span>
         </div>
       );
     }
     
     export default App;

---

▶ 다시 누르면 안보이고 -> 보이고 -> 안보이고 . . .를 하는 홈페이지를 만들어보자!

import "./App.css";
import { useState } from "react";

function App() {
  let [modal, setModal] = useState(false);
  return (
    <>
      <div onClick={()=>{ modal == false ? setModal(true) : setModal(false)}}>
        홈페이지
      </div>
      {
        modal == true ? <Modal/> : null
      }

    </>
  );
}

function Modal(){
  return (
    <div className="modal">
      <h3>제목</h3>
      <span>날짜</span>
      <span>상세내용</span>
    </div>
  );
}

export default App;

---

 

함수, 클래스형 컴포넌트(1) : https://chanhuiseok.github.io/posts/react-4/

[React] React의 컴포넌트(Component) - 함수형, 클래스형 컴포넌트

함수, 클래스형 컴포넌트(2) : https://life-with-coding.tistory.com/508

[React] React 컴포넌트란? React 앱을 구성하는 요소