1. 복잡한 HTML을 한 단어로 치환할 수 있는 Component 문법

• React는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. 이 것을 Component 라고 합니다.
• 이걸 이용하면 함수를 만들듯이, 변수를 만들듯이 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. 한번 알아봅시다.

function App(){
 return (
   <div>
   	(생략)
   	<Modal />
   </div>
   )
}

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

• 코드를 위와 같이 작성하면 HTML을 한 단어로 줄일 수 있습니다.

• 줄이는 방법은 아래와 같습니다.

  1. function을 이용해서 함수를 하나 만들어주고 작명합니다.
  2. 그 함수 안에 있는 return ( ) 안에 축약을 원하는 HTML을 담으면 됩니다.
  3. 그럼 원하는 곳에서 <함수명></함수명> 사용하면 아까 축약한 HTML이 등장합니다.

• 이렇게 축약한 HTML 덩어리를 Component 라고 부릅니다. <div> 로 작성되어있는 수 많은 뭉텅이들보다 <Modal> 이런 식으로 되어있으니 남이 봤을 때 & 미래의 내가 봤을 때 레이아웃을 바로 파악이 가능하니 나중에 관리하기도 좋습니다.

Comnent 만들 때 주의점
1. component 를 작명할 땐 영어 대문자로 작명합니다.
2. return() 안에는 html 태그들이 평행하게 여러 개 들어갈 수 있습니다.
3. function App() { } 내부에서 만들면 안됩니다. 왜냐하면 function App() { } 이것도 다시보니 컴포넌트 생성 문법인게 보이시나요? component 안에 component 를 만들진 않습니다.
4. <컴포넌트></컴포넌트> 이렇게 써도되고 <컴포넌트 /> 로 써도 됩니다.

2. Comnent 문법을 만들 때 arrow function을 사용해도 됩니다.

• 함수를 만드는 문법이 하나만 있는게 아니기 때문에 아래와 같이 작성해도 됩니다.
• let 대신 const 변수를 쓰는 사람들도 있으니 마음에 드는 것으로 쓰면 됩니다.

function Modal(){
 return ( <div></div> ) 
}

let Modal = () => {
 return ( <div></div> ) 
}

3. 어떤 HTML 들을 Component로 만드는 게 좋은가?

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

  1. 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋습니다.
  2. 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋습니다.
  3. 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는 게 좋습니다.
  4. 또는 다른 팀원과 협업을 할 때 웹페이지를 Component 단위로 나워서 작업을 분배하기도 합니다.

• 함수 문법도 쓸 때가 긴 코드를 축약할 때, 다른 곳에서 코드를 재 사용할 때, 복잡한 코드를 작은 기능으로 나눌 때 쓰는데, 컴포넌트도 그냥 함수 문법과 같아서 용도도 같습니다.

  4. Component의 단점

• HTML을 깔끔하게 쓰고 싶어서 Component를 수 백개 만들면 그것만으로도 관리가 힘듭니다.

• 예를 들면 function Modal 안에서 글제목 state를 쓰고 싶어서 {글제목} 이렇게 쓰면 잘 안되는데, 왜냐면 당연히 자바스크립트에서는 한 function 안에 있는 변수를 다른 function에서 마음대로 쓸 수 없기 때문입니다.

• props라는 문법을 이용해서 state를 <Modal> 까지 전해줘야 비로소 사용이 가능합니다. 즉, 온갖 잡다한 걸 Component로 쪼개지말고 꼭 필요한 곳만 Component로 쪼개야 합니다.

5. React에서 동적인 UI 만들기

• 방금 Component화 해서 만들었던 Modal창을 가지고 동적인 UI 를 만들어봅시다.
• 동적인 UI가 뭐냐면 유저가 조작 시 형태가 바뀌는 것들을 의미합니다. (모달창, 탭, 서브메뉴, 툴팁, 경고문 등등)

동적인 UI를 만드는 3step
Step1. html, css로 미리 UI 디자인 하기.
Step2. UI의 현재 상태를 state로 저장하기
Step3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성하기

• 이제 이 3개의 step을 가지고 Modal창이 등장하는 것을 만들어봅시다.

Step1. html, css로 미리 디자인하기

• 디자인은 간단하게 만들어놓읍시다.

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

.modal{
  margin-top : 20px;
  padding : 20px;
  background: #eee;
  text-align: left;
}

Step2. UI 현재 상태를 state로 저장하기

• 일단 state를 하나 만들고 거기에 현재 UI 상태를 저장합시다.

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

• modal 이라고 작명해놓았습니다. 영어로 작명 시에는 state 변경함수는 set을 앞에 붙이는 것이 관습입니다.
• state에 무슨 자료를 넣어야 되냐면 정말 마음대로 하면 됩니다. 그냥 현재 모달창의 상태만 파악할 수 있으면 됩니다.
• 모달창은 열림/닫힘 이 두 개의 상태 밖에 없기 때문에 2종류만 표현할 수 있는 자료형이면 됩니다.

let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(0);

Step3. state에 따라서 UI가 어떻게 보일지 작성하기

function App () {
	let [modal, setModal] = useState(false);
    
    return(
    	저 state가 true면 <Modal /> 을 보여주고,
        저 sate가 false면 아무것도 보여주지 마세요.
    )
}

• 이런 식으로 코드를 작성하라는 소리입니다. 프로그래밍할 때 '이 경우에는 이렇게 해주세요~' 라고 코드를 작성하고 싶을 때는 if 조건문을 사용합니다.

JSX에서 조건문 쓰는 법
조건문은 if / else 문법을 쓰면 되는데, JSX 안에서는 if / else 문법을 바로 사용할 수 없습니다. 하지만 if 문법 대신 삼항연사자라는 JSX 중괄호 안에서 사용 가능합니다.

조건식 ? 조건식이 참일 때 실행할 코드 : 조건식이 거짓일 때 실행할 코드

• 이렇게 if문 대신 쓸 수 있는 문법이 삼항연산자 입니다.

3 > 1 ? console.log('맞음') : console.log('아님');

• 예를 들어 이렇게 쓰면 3 > 1이 참이기 때문에 '맞음'이 출력됩니다.
• 이제 아까 하던거로 돌아가서 문제를 풀어봅시다.

function App() {
	let [modal, setModal] = useState(false);
    return (
    	<div className='app'>
        (생략)
        { modal == true ? <Modal /> : null }
        </div>
    )
}

• 이렇게 코드를 작성하면 됩니다. null 은 아무 html도 남기기 싫을 때 사용하는 자료입니다.

6. 글제목 누르면 모달창 띄우기

• 지금은 모달창이 안보입니다. state의 기본 값이 false 였고, flase일 경우엔 안보이게 코드를 작성했기 때문입니다.
• 그런데 이제 모달창을 보이게 하려면 어떻게 해야할까요?

function App() {
  let [modal, setModal] = useState(false);
  return (
  <div>
  	(생략)
    <button onClick={ () => { setModal(true) } }> {제목[0]} </button>
    { modal == true ? <Modal /> : null }
  </div>
  )
 }

7. React에서 UI를 만드는 과정

• 스위치와 전들을 만드는 거랑 비슷하다고 보면 됩니다.

  1. 전등을 달아놓고
  2. 스위치와 연결하고
  3. 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록 만듭니다.
     그리고 나중에 필요하면 스위치를 조작만 하면됩니다. 스위치는 state, 전등은 <Modal /> 입니다.

8. 글 제목을 한번 더 누르면 모달창 닫히게 하기

• 지금 위에서 짠 코드는 버튼을 클릭하면 모달창이 뜨도록 만들었습니다.
• 제목을 한번 더 누르면 모달창이 꺼지게 하려면 어떻게 해야할까요?

  function App() {
  let [modal, setModal] = useState(false);
  
  let onBtnChange = () => {
  	if(modal == true){
  	setModal(false);
  } else {
  	setModal(true);
  }
}
  
  return (
  <div>
  	(생략)
    <button onClick={ () => { onBtnChange } }> {제목[0]} </button>
    { modal == true ? <Modal /> : null }
  </div>
  )