코딩애플_component 만들기,modal 창

변경 code

import React, {useState} from 'react';
import './App.css';

function App() {
  
  let [title, titleFunction] = useState(['React','HTML','CSS']);
  let [count, countFuction] = useState(0);

  // function titleChangeFunction(){
  //   let changedtitle = title.slice();   //[...title] 도 가능, deep copy 가 된다.
  //   changedtitle[0] = 'React - 1';
  //   titleFunction(changedtitle);
  // }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      <div className='list'>글제목
        <h3>{title[0]}  <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
        {/* <button onClick={titleChangeFunction}>Title Change</button> */}
        <p>2월 17일 발행</p>
        <hr/>       
      </div>

      <div className='list'>글제목
        <h3>{title[1]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div> 

      <div className='list'>글제목
        <h3>{title[2]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div>

      <Modal />

    </div>
  );
}

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

export default App;

풀이

1.component 활용

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <Modal></Modal>
    </div>
  )
}

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

상기와 같이 Modal 이라는 컴포넌트를 만들수 있다.

     <div className='list'>글제목
        <h3>{title[2]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div>

      <Modal />

    </div>
  );
}

본문에는 <Modal /> 이라 간단히 적어주면 컴포넌트를 불러온다.

2.component 문법

2.1 component 이름은 대문자로 시작한다.

2.2 여러 태그들을 묶는 부모 태그가 반드시 필요하다.

function 예시컴포넌트(){
  return (
    <>
      <div>안녕</div>
      <div>안녕</div>
      <div>안녕</div>
    </>
  )
}

fragments라는 문법을 써도 된다.

2.3 component 생성 위치는 function App(){} 과 나란히 만들어준다.