[React : 05] Component

https://youtu.be/bq2SjODrhJQ

---

※주의※

- 우리는 html 코드를 return() 안에 짜고 있다. return 안에는 항상 하나의 태그만 시작하고 끝내야 한다. 

 

return
(
	<div>
	   <div>이 건</div>
	   <div>가 능</div>
	</div>
);

return
(
	<div>이  건</div>
	<div>불가능</div>
	<div>하  다</div>
)

 

---

 

- HTML을 한 단어로 줄여서 쓸 수 있는 방법 : 리액트의 Component 문법

- function App() 이곳이 끝나는 괄호 아래에 Modal() 함수를 만들고 return 안에 원하는 HTML을 작성하면 끝!

- 태그를 부를 땐 <Modal /> 이렇게만 해줘도 된다!

 

Component

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

- return() 안에 있는 건 태그 하나로 묶어야 한다. ex) <div>

- return() 내부를 묶을 때 의미 없는 <div>를 쓰기 싫다면 <></> 이렇게

- Component를 만들어두면 관리가 편하다. ( 안에 또 만들 수 있음 )

 

장점

- 반복적으로 출현하는 HTML 덩어리들을 만들면 편하다. 

- 자주 바뀌는 HTML UI를 만들면 편하다.

- 다른 페이지를 만들 때도 컴포넌트로 만들면 좋다. 

 

단점

- 많이 쓰면 state 쓸 때 복잡해진다.

- App() 컴포넌트에서 만든 state 변수를 사용하지 못 하기 때문에 새로운 컴포넌트 안에다가 state 변수를 만들어야 한다. (props문법 이용)

 

---

 

무료판은 이걸로 끝!

쉽게 알려주셔서 강의 결제 했습니다.

유료판을 들을 때는 비공개로 돌리고

나중에 소규모 프로젝트 만들 때 몇 자 적어보겠습니다~

 

 

/* eslint-disable */

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

function App() {  // 얘도 Component

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '응암 고기 맛집']); 
  let [하트, 하트변경] = useState(0);
  let ftStyle = { color : 'wheat', fontSize : '30px'}

  function 버튼클릭()
  {
    var newArray = [...글제목];
    newArray[0] = '여자 코트 추천';
    글제목변경( newArray );
  }

  return (
    <div className="App">
      <div className='black-nav'>
        <div style={ ftStyle }>개발 Blog</div> 
      </div>
      <div className='list'>
        <button onClick={ 버튼클릭 }> button </button>
        <h3> { 글제목[0] } <span onClick={ ()=>{ 하트변경( 하트 + 1) } }>💖</span> { 하트 } </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
      <div className='list'>
        <h3> { 글제목[1] } </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
      <div className='list'>
        <h3> { 글제목[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;