[React] - Component 문법

• 리액트는 복잡한 html 코드를 하나의 component로 만들어서 간단히 사용할 수 있는 기능을 제공한다.
• component를 통해 복잡하고 반복되는 코드를 변수나 함수처럼 하나의 단어로 치환해서 사용할 수 있다.
  
  

<컴포넌트 만드는 법>

• function을 이용해 함수를 하나 만들어주고 작명한다.
• 함수의 return() 안에 원하는 html 코드를 담는다.
  ! return () 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 함, html 태그 2개 나란히 적기 X
• 원하는 곳에서 <함수명></함수명>을 쓰면 2.에서 쓴 html이 작동한다.
  -> component = 축약된 html 덩어리

function Modal(){ // 컴포넌트 생성 기본 구조
  return ( <div></div> )
}

function App() {
  return (
  	<div>
    	...
    	<Modal></Modal> // 컴포넌트 호출
    </div>
  )
}

function Modal() { // Modal이라는 컴포넌트 생성
	return (
    	<div className='modal'>
      		<h4>제목</h4>
      		<p>날짜</p>
      		<p>상세 내용</p>
      	</div>
   )
}

• arrow function 사용 가능

let Modal = () => { // let 대신 const도 가능
  return ( <div></div>) 
}

<컴포넌트 생성시 주의사항>

• 컴포넌트는 알파벳 대문자로 시작해야 한다.
• return() 안에는 평행한 html 태그가 들어갈 수 없다.
• 컴포넌트는 function App(){} 밖에서 생성되어야 한다.
  (사실상 function App()도 컴포넌트임, 컴포넌트 안에 컴포넌트를 만들진 않음)
• <Component></Component> 대신 <Component /> 가능

<어떤 html들을 컴포넌트로 만드는 게 좋을까?>

• 반복되는 html 코드
• 내용이 자주 변경될 것 같은 html 코드
• 다른 페이지를 만들고 싶을 때, 해당 페이지의 html 내용
• 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업을 분배하기도 함
  => 함수 문법, 용도랑 거의 같다고 생각하면 됨

<컴포넌트의 단점>

• 컴포넌트를 너무 많이 생성하면 오히려 더 복잡해지기 때문에 꼭 필요한 것만 컴포넌트로 만들어야 한다

++)
자바스크립트에선 한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없다. 이때 props라는 문법을 이용해 state를 해당 컴포넌트에 전해줘야 사용이 가능하다. 다음 시간에 알아보자!