---

📍 1. 기본 구성 소개

---

👀 1. App.js

/* eslint-disable */
import { useState } from 'react';
import './App.css';
function App() {
   return (
    <div>
      <div className='black-nav'>
        <h4>JavaScript에 대하여</h4>
      </div>
      <div className='list'>
        <h1>1. JavaScript의 개요</h1>
        <p>2023-02-21</p>
      </div>
    </div>
  )
}

---

👀 2. App.css

.black-nav {
  display: flex;
  background: burlywood;
  width: 100%;
  color : rgb(0, 0, 0);
  padding-left: 20px;
}
.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}

---

📍 2. Modal 생성

---

👀 1. function Modal() 생성 및 호출

(...생략)
function App() {
  return (
    <div>
      <div className='black-nav'>
        <h4>JavaScript에 대하여</h4>
        {/* <h4>React Blog - by.ouneno</h4> */}
      </div>
      <div className='list'>
        <h1>1. JavaScript의 개요</h1>
        <p>2023-02-21</p>
      </div>
      <Modal/> 🎈하단에 있는 function Modal을 불러온다.
    </div>
  )
}
function Modal() {
  return (
    <div>
      <div className='modal'>
        <h4>JavaScript의 개요</h4>
        <p>2023-02-21</p>
        <p>
          Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 
          특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 
          오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, 
          CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.
        </p>
      </div>
    </div>
  )
 } 

---

👀 2. 타 함수 호출하는 방법

App() 함수에 Modal() 함수를 불러오는 방식이다.
App() 함수의 return문 내 div 태그 안에 작성을 해야하며, 불러오는 방식은 두 가지가 있다.

1. <Modal></Modal>
2. <Modal/>

---

📍 3. 삼항연산자로 조건걸기

---

👀 1. 삼항연산자

[ 조건식 ? 참일경우 : 거짓일경우 ]

1==1 ? 'true' : 'false'

<h2>
	{
		1==1 ? 'true' : 'false'
	}
</h2>

🔻🔻🔻결과🔻🔻🔻

true

2==1 ? 'true' : 'false'

<h2>
	{
		2==1 ? 'true' : 'false'
	}
</h2>

🔻🔻🔻결과🔻🔻🔻

false

---

👀 2. 클릭시 모달생기게 하는 기능

삼항연산자 / 변수 / onClick

function App() {
  let [modal, setModal] = useState(false);
  return (
    <div>
      <div className='black-nav'>
        <h4>JavaScript에 대하여</h4>
      </div>
      <div className='list'>
        <h1 onClick = { () => { setModal(!modal) }}>1. JavaScript의 개요</h1>
        <p>2023-02-21</p>
      </div>    
      {
        modal==true ? <Modal/> : null
      }
      </div>
  )
}

---

👀 3. 삼항연산자 조건식생성

modal==true ? <Modal/> : null

🔻🔻🔻해석🔻🔻🔻

=> modal이 true일 경우 Modal 함수를 불러오고, false일 경우 null 표시

---

👀 4. useState 사용 변수생성

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

🔻🔻🔻해석🔻🔻🔻

=> modal이라는 변수에 setModal 변경함수를 적용하고 상태는 false로 한다.
=> 즉, modal은 현재 false 상태이며, setModal이라는 기능을 작동하게 하여 true 상태로 변환이 가능하다.

---

👀 5. onClick 사용

<h1 onClick = { () => { setModal(!modal) }}>1. JavaScript의 개요</h1>

🔻🔻🔻해석🔻🔻🔻

=> h1라인인 1.JavaScript의 개요를 클릭할 경우 setModal을 작동한다.
=> modal의 반대 상태로 변환시켜준다.