[React.js] Component

component는 ?

긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.
이걸 이용해, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다.

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

이렇게 Modal()이란 함수에 축약할 HTML을 return한다.

그리고

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

이렇게 return된 HTML을 한줄로 간단히 표기 가능하다.
이러면 남이볼때도, 내가 다시 볼때도 깔끔하고 직관적으로 체크 가능하다.

Component 사용 시 주의점

• component 작명 시 영어대문자 시작이 관습
• return()안엔 html 태크들이 평행하게 여러개 들어갈 수 없다(큰 div하나로 다 감싼 형태로 해야)
• function App() {} 내부에서 만들면 안된다. 왜냐면 function App() {} 자체도 컴포넌트 생성문법이니까! 그래서 component 안에 component는 놉

Component 언제 쓰냐 ?

• 사이트에 반복해서 출현하는 HTML 덩어리들
• 내용이 매우 자주 변경될거같은 HTML 부분을 잘라서
• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로
• 다른 팀원과 협업할때 컴포넌트 단위로 나누기도..

컴포넌트에서 부모 컴포넌트의 state가 필요하면 ?

props를 통해 받아야 사용 가능하다.
당연히 App의 state는 App 내부에서 선언되었기 때문에 외부의 컴포넌트에선 사용 불가능하다.
그래서 props를 통해 부모가 자식에게 state를 같이 사용가능하도록 준다.

사용법은
1. 자식 컴포넌트 사용하는 곳에 가서 <jasikComponent={stateName} />
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.stateName 사용

function App (){
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal title={title}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.title[0] }</h4>
    </div>
  )
}

이런식으로 사용하면 된다.

사실 아직 매우 기초적인 부분만 구현해봐서 컴포넌트의 사용성이나 효과, 사용 시기를 잘 모르겠다. 일단 계속 만들어보며 감을 잡자!!