React 컴포넌트

리액트에서는 앱에서 재사용 가능한 컴포넌트를 만들 수 있다.

UI 의 모든 부분은 컴포넌트이다.

리액트의 함수 이름은 항상 대문자로 시작한다. ( HTML 태그와 구분하기 위해서 )

내부의 마크업을 반환시켜 브라우저에 렌더링한다.

 

컴포넌트는 JSX 라 불리는 구문 확장을 사용해 마크업을 생성하는 javascript 함수이다. 중첩구성은 허용되지 않는다.

 

---

 

 

🎈컴포넌트 작성법

 

function Profile() {
   return(
      <img src="" alt="" />
   );
}

export default Profile;

 

1. 컴포넌트를 내보낸다.   `export default Profile;` 혹은 export default function Profile () {} 로 작성가능

2. 함수를 정의한다.  `function Profile`

3. 마크업을 작성한다.  `<img />

 

 

🎈 작성 시 주의할 점과 HTML 과 다른 점

 

function Profile() {
   return <img
   	    src=""
            alt=""
            className=""
      />
}

export default Profile;

마크업이 1줄일때에는 return 옆에 바로 작성 가능하지만, 여러줄일 경우에는 ( 괄호 ) 로 감싸주어야 한다.

class 속성은 className 이라는 prop으로 작성해주어야 한다.

start tag, end tag 가 필요하다. <img> 나 <br> 같이 닫는 태그가 필요하지 않았던 태그들은 self closing 을 해주어 <img />, <br /> 로 작성해주어야 한다.

 

function Profile() {
   return(
       <React.Fragment>
          <img src="" alt="" />
          <img src="" alt="" />
          <img src="" alt="" />
       );
       </>
}

export default Profile;

형제요소만 있을 때에는 반환이 불가능하다. ( undefined 출력 )

형제요소를 감싸는 태그가 필요하다. <React.Fragment>지만 내용을 생략하여 <> </> 로 작성가능

 

 

 

🎈컴포넌트 내보내기

 

함수 앞에 export 를 작성해 내보내 줄 수 있다. named 이름 내보내기와 default 기본 내보내기가 있다. 

export default function Gallery() {
	기본 내보내기 , default
}

export function Profile () {
	이름 내보내기 , named
}

내보내는 것이 1개일 때 default 를 쓰거나 그렇지 않은 경우도 있다.

 

 

🎈컴포넌트 불러오기

 

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

위에서 내보낸 함수들을 불러온다.

기본으로 내보내진 함수는 함수 이름만 작성해주고, 이름으로 내보내진 함수는 { } 중괄호 안에 함수이름을 넣어줘야 한다.