Library - React 기본구성

프론트 페이지는 index.js 파일로부터 로딩 되기 시작한다.

React 프로젝트의 경우, index.html 파일에서, 리액트 파일 확장자인 jsx로 만들어진 index.jsx 파일을 임포트 하며 시작된다.
Index.jsx 파일은 웹 어플리케이션을 export 하고있는 App.jsx 파일을 import 하고 있다.

App.jsx 파일

Index.jsx 파일이 앱의 진입점. 

index.jsx는 Index.html 의 root 아이디 값을 가진 태그에, App.jsx를 import 해서 렌더링 해준다

 

개발자가 추가하는 커스텀 컴포넌트는 결과적으로 html 태그로 변환되어 사용된다.

때문에, 커스텀 컴포넌트를 만들어서 사용할때는 이름 충돌이 일어나지 않도록, Uppercase로 시작하도록 해야한다.

---

Props

리액트 함수에서는 하나의 prop만 받으며 일반적으로 props라는 명칭으로 사용한다.
단, 하나의 값만 받을수 있는게 아니라 prop이라는 객체로 받는 방식이다.

Components

일반적으로, 하나의 컴포넌트에 하나의 jsx function을 작성하는 방식으로 구현한다. 
단, 다른 함수가, 해당 jsx 파일에 필요한 데이터를 가공한다던지 하는 방식의, dependency가 있는 경우엔 여러 함수를 포함하기도 한다.

Css 파일 컴포넌트화
컴포넌트 내에서 사용하는 css 스타일을 쉽게 보기 위해서, 컴포넌트 별 css 파일을 만들어서 작성할수 있다.
해당 jsx 파일에서 css 파일을 import해서 사용하면된다. BUT, import 를 해서 사용한 컴포넌트에만 해당 css 스타일이 적용되는게 아니라서, 원하지 않는 곳에서 작성했던 css 스타일이 적용되는 부작용이 있을수 있다. scope를 줄이는 방법으로 해결해야할 필요가 있음!

 

Chilren Prop

custom component는 태그 사이에 주어진 값을 props.children 이라는 값으로 받는다.
직접적으로 children 이라는 변수값으로 받지는 않고, 태그 사이에 작성한 값을 사용하는 방식이다.

단순한 텍스트 뿐만아니라 다양한 것들이 chilren prop으로 들어갈수 있다. 예를들어 다른 react component.

export default function TabButton(props) {
    return <li>
        <button>{props.children}</button>
    </li>;
}

사용시

<section id="examples">
    <h2>Examples</h2>
    <menu>
        <TabButton>Components</TabButton>
    </menu>
</section>

Children Prop, Attribute Props 둘중 어떤 것을 사용하는게 좋을지는 사용시 상황에 따라 다르니, 잘 고려해보고 사용하면 좋을듯 하다.