React-입문 : Component

React 에서 웹 페이지를 보여 줄 때, Component라고 칭하는 함수를 사용해서 보여준다.

index.html
main.html
home.html
detail.html

이런식으로 페이지를 여러개 만들어 서버 사이드 렌더링으로 보여주는 옛날?의 방식을 지나, 새로고침 현상과 같은 문제점으로 하나의 App에서, 즉 하나의 웹페이지를 통해서 여러 페이지를 보여주는 것이 REACT 이다.

그렇다면 하나의 웹페이지에서 어떻게 여러 개의 페이지를 보여줄 수 있을까? 라고 묻는다면

React는 Component를 사용 하여 여러개의 UI를 보여준다 라고 나는 답할 것 같다.

Component

구성이라는 의미로 나는 받아들이고 있는데

처음에는 함수형 Component를 가지고 UI를 만든다고 공부 했을 대 조금 무섭?지는 않았지만,,

낯설었다 .

내가 받아들인 말로는 그냥 함수를 return 한 결과 값을 보여주는 것일 뿐 이라는 거다.

기발하지 않는가? 함수로 return 한 값을 보여준다는것이...

return 하는 것 안에 html 태그들을 정확히는 JSX 작성해주자

뭐 아무튼

컴포넌트의 작성에 관해 알아보자

Component

1. Component를 만들 때는 반드시 첫 글자는 대문자로 쓰자

function Component() {
  return `보여줄 UI`
}

2. return 문안에 html 코드처럼 짤 때 주의 할 점이 있음

return (
  <div></div>
   <div></div>
)

• return ()안에 두개의 html 태그 나란히 적기 이런거 안됨
• return () 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 함

근데 태그하나로 먼 페이지를 만드냐 할 수 있는데

그럴 땐

return(
  <div>
    <div></div>
    <div></div>
  </div>
)

이렇게 하나의 div로 감싸서 그 안에서 내가 보여줄 UI 이쁘게 꾸며주자

근데 의미없는 div로 감싸는거 난 맘이 불편했음..

그럴 땐

return(
  <>
    <div></div>
    <div></div>
  </>
)

<></> 이걸로 감싸두 되는데 이걸 fragment 문법이라고 한다

3. 다른 컴포넌트에 붙여보자

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

function Modal(){
  return (
    <div className="modal">
      ....
    </div>
  )
}

App이라는 컴포넌트 안에서 Modal이라는 컴포넌트를 보여주고 싶다면

위 코드처럼 써두 된다.

그런데 조금더 편리하게 축약형으로 사용 할 수 있다.

function App (){
  return (
    <div>
      (생략)
      <Modal/>// 태그 하나만쓸 수 있다.
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      ....
    </div>
  )
}

이런식으로 하나의 태그로 저렇게도 쓸 수 있다.

근데 왜 씀??

컴포넌트 사용 전

// 컴포넌트가 없다면
function App (){
  return (
    <div>
   	.<div>
    .<div>
    .<div>
    .<div>
    .<div>
    .<div>
    //수십개의 태그들로 디러워짐.
    </div>
  )
}

컴포넌트 사용 후

function App (){
  return <Modal/>
}
  
function Modal(){
  return(...)
}

깔끔히 보이기도 하고

참고로 태그 하나만 return 하면 (소괄호)안써도 된다.

정리

컴포넌트는 함수이다.

함수를 선언해주는데, 2가지만 알아보자면

1. 선언문
2. 할당문

이런 선언들을 할 수 있는데

컴포넌트도 마찬가지이다.

function Modal(){...} //선언
const Modal=()=>{...} // 할당

html 태그들 병렬로 작성 안됨 - 함수는 하나의 값만 내 뱉으니까.

function App {
  //컴포넌트에 html 태그를 넣고 싶다면  병렬 처리 안됨
  return (
    <>
    ... //태그 '들'
    </>
  )
}

귀찮으면 태그 하나로만 사용하기

function App{
  return <Modal></Modal>
}
// 귀찮으면 하나로 축약 하자
function App{
  return <Modal/>
}