React 입문 - Component

 

컴포넌트의 기본 구조

//   <---- 컴포넌트 밖 영역으로 내가 필요한 파일 가져다 놓는 영역 ---->

import React from 'react';
function App() {
  
// <----  자바스크립트 영역 ---->



  return (
  /* <----  HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
    </div>
  );
}



//   <---- 내가 만든 컴포넌트를 내보내는 영역 ---->
export default App;

component는 레고 블럭같은 존재!

 

컨포넌트를 외부에서 가져올때는 import(컴포넌트 맨 위 코드)를 해줘야하고

내보낼때는 export(컴포넌트 맨아래 코드)를 해야한다. 

 

그리고 App 함수 안에는 return 문을 기준으로 위로는 자바스크립트를 쓰는 영역,

아래는 JSX를 쓰는 영역이 존재한다.

 

 

• 컴포넌트 이용시 주의할 점!

컴포넌트 사용시 이름의 첫 글자는 대문자를 사용해야한다. (예 - App )

폴더의 이름의 경우 소문자를 사용해야한다.

 

---

이름 짓는 방법

: 변수명이나 클래스명을 만들때 규칙을 정해서 만든다.

협업하는 프로젝트일 수록 이름짓는 방법을 지켜서 짓어야한다.

 

두단어 이상으로 변수명을 지을 때 참고!

 

1. camelCase
   카멜케이스의 경우 낙타등 모양에서 가져온 이름으로 첫번째단어의 첫글자는 소문자,  두번째단어부터는 첫글자를 대문자로 표현한다.
    
   ex) userNameList
   
   
2. snake_case
   스네이크케이스는 언더바를 사용했다. 바닥에 있는 바모양이 바닥을 기는 스테이크를 연상시켜 붙여진 이름이 아닐까한다.
   스네이크식은 주소 상수를 선언할때 사용한다고 한다.
   
   ex) user_name_list
   
   
3. PascalCase
   파스칼케이스는 카멜케이스와 비슷하다. 단, 파스칼은 모든 단어의 첫글자를 다 대문자로 사용해주면 된다.
   
   ex) UserNameList
   
   
4. kebab-case
   케밥케이스는 케밥에 넣는 고기가 꼬챙이에 꽂혀있는 모습에서 나온 이름인것 같다. 스테이크케이스와 비슷하지만 케밥케이스는 언더바 대신 하이픈이 들어간다.
   
   ex) user-name-list

---

컴포넌트 안에 컴포넌트 넣기

 

부모자식 관계 알기

 

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function Mother() {
  return <Child />;
}

function App() {
  return <Mother />;
}

export default App;

위와 같은 방식으로 부모자식 관계를 형성 할 수 있다.