miniter에 react를 적용하게 됐다.
CRA(crate-react-app)으로 react 환경을 구성했다.
앞으로 혼자 개발 할 것이 아니기 때문에 eslint와 prettier로 코딩 환경을 구성했다.
eslint란??
Javascript linting 유틸리티다.
코드 linting은 특정 스타일 가이드 라인을 준수하니 않는 문제가 있는 패턴이나 코드를 찾는 데 사용되는 정적 분석 유형이다.
eslint가 만들어진 주 이유는 개발자가 자신의 규칙을 만들 수 있도록 하기위한 것이다.
왜? Javascript에서 eslint를 사용할까?
일단 Javascript는 타 언어와 다르게 동적이도 느슨한 언어이다.
그로 인해 오류가 발생하기 쉬운 문제점을 가지고 있다.
이 문제를 쉽게 발견(Javascript코드를 실행하지 않고도)하고 수정 및
오류 방지를 위해 사용한다.
Javascript에 이런 문제를 보완해주는 TypeScript도 있다.
prettier란??
prettier는 코드 포맷터로 코드 스타일을 일관성 있게 만들어 준다.
react는 컴포넌트 단위의 라이브러리이기 때문에 기존에 만들었던 miniter를 쪼개어 나눴다.
쪼개진 컴포넌트를(js파일 단위) 조립해서 하나의 작품으로 만들었다.
하나의 작품으로 만드는 과정
루트 컴포넌트에 각 컴포넌트를 맞춰준다.
컴포넌트들(각 파일들)이 분리 되어있기 때문에 독립적인 스코프를 가진다.
A라는 컴포넌트를 B라는 컴포넌트에서 사용하기 위해서는 A라는 컴포넌트에서 export default 클래스 이름을 꼭 해줘야하고 B라는 컴포넌트에서는 import 클래스 이름 from '컴포넌트 경로'를 꼭 해줘야한다.
export는 다른 컴포넌트에서 사용할 수 있게 내보내는 역할.
import는 다른 컴포넌트를 해당 컴포넌트에서 사용할 수 있게 만드는 역할.
컴포넌트 안에서 사용될 데이터(state, props)를 컨트롤 한다.
해당 컴포넌트에서 변경 및 유지해야 할 데이터가 있다면 state(상태 데이터)를 정의하고 사용한다.
해당 컴포넌트에서 유지해야 할 데이터가 아니라면 props(부모로 부터 받는 데이터)를 받아 사용한다.
react에서는 DOM에 직접적으로 접근하지 않는다.
ex)document.getSelector() / DOM.addEventlistener() / DOM의 프로퍼티 접근 등등
react에서는 style을 인라인 방식으로 주지 않고 항상 별도의 style 파일에서 정의하고 selector을 이용해서 style을 적용한다.