[Blog-project] Component

🚀 'Component' 란?

• 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다.
• 리액트는 Component를 통해 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. 즉, UI의 구성을 각 Component로 쪼갠 뒤, 보여지는 HTML페이지에 <Component이름 />이라는 한 줄로 넣어서 구성할 수 있다.

🍎 Component 특징
1. Component 이름 지을 떄는 영어 대문자로 시작.

2. return () 안엔 태그들이 평행하게 여러개 들어갈 수 없다. 평행하게 여러개의 태그를 쓰고 싶으면
   로 묶어야 한다.
   아니면 의미없는 div를 쓰기 싫으면 <> </> 이걸로 묶어도 된다.

🐣 상세페이지 겸 모달창 UI 예제

// Modal Component

function Modal(){

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



// Main Component(App.js)
import Modal from './Component/Modal.js';  // import해서 불러오기

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <Modal></Modal>  // Component명으로 불러올 수 있다
    </div>
  )
}

💡 어떤 HTML들을 Component 만드는게 좋을까?

기준은 없지만 관습적으로 어떤 부분을 주로 Component화 하냐면

1) 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋다.
2) 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다.
3) 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 컴포넌트로 만드시는게 좋다. (그냥 좋을 뿐 필수는 아님)
4) 또는 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업을 분배하기도 한다.

🚀 toggle 만들기

자바스크립트에선 display : block 이런 스타일을 조정해서 보여주고 안보여주고 했었는데
리액트에선 모달창이 현재 보이는지 안보이는지 state를 저장해둔 뒤에 if문을 사용해서 state에 따라 모달창을 보여준다.

🚗 React에서의 if문 ➡ 삼항연산자

React에서 if문을 사용할 때는 삼항연산자를 사용해야 한다. (리액트 return문 내에서 if문을 사용할 수 없어서 if문 대용 역할을 할 수 있는 삼항연산자를 사용)

1) 기본 state값을 true(혹은 false)로 지정하기
2) 삼항연산자를 통해 true(?)이면 false(혹은 true), false(:)이면 null을 조건으로 걸기

function App (){

  let [modal, setModal] = useState(false);  // 기본값으로 false를 준다

  return (
    <div>
      HTML 잔뜩있는 곳
     
      { 
         modal === true   // modal의 기본state값은 false이므로, 이 상태는 modal이 안보임
         ? <Modal />      // modal이 true가 되면 <Modal />이 보임
         : null           // modal이 false면 아무것도 안보임
      }
    </div>
    <button onClick={ ()=>{ setModal(!modal) } }> 열기 </button>
    // button 누르면 state값(=false)이 true로 바뀜(false의 반대니깐)
    // 이렇게 하면 toggle기능이 구현됨. 누르면 true, 또누르면 false
  )
}



// Modal Component
function Modal(){

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

🚗 React에서 클릭시 보이는 UI 만드는 법

1) 일단 UI가 보이는/보이지않는 상태정보를 state로 만들어둠 (보통 true/false 자료형으로)
2) state가 true일 때만 UI를 보여준다고 if문을 사용함
3) <열기버튼>을 누르면 state가 true로 바뀌도록 버튼에 기능개발함