리액트 시작하기

각 운영체제에 맞게 node js를 설치한다.

https://nodejs.org/en/download/package-manager

 

node js란 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 실행할 수 있게 해주는 런타임이다.

리액트로 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 통해서 사용되기 때문에 설치하여 사용한다.

개발도구에는 ECMAScript를 호환 시켜주는 바벨, 모듈화 된 코드를 한 파일로 합치는 것을 번들링, 코드를 수정할 때마다 웹 브라우저를 갱신 시켜주는 리로딩 기능을 하는 웹팩이 묶여있다. nodejs를 설치하면 패키지 매니저 도구인 npm도 같이 설치되는데 이를 통해 다른 개발자가 만든 패키지를 설치하여 사용할 수 있다.

 

프로젝트 생성

터미널에 아래 명령어를 사용하여 프로젝트를 생성한다. 프로젝트 생성시 위에서 언급한 웹팩, 바벨 등을 설치해야 하는데 해당 부분을 생략하고 간편하게 프로젝트를 만들어준다.

npm create react-app [프로젝트명]

프로젝트가 생성되면 아래 명령어를 입력해서 리액트 프로젝트를 실행시킬 수 있다.

npm run start

 

설정 및 JSX

src/App.js 파일을 열어보면 자바스크립트 파일로 작성된 코드가 있다. 상단에 import는 다른 모듈을 불러와서 사용할 수 있게 해줌을 뜻한다. 이 과정을 번들이라고 하는데 리액트는 일반적으로 웹팩을 사용한다. 웹팩 말고도 Parcel, browserify도 있다. 모든 파일은 결국 index.js에서 묶여서 사용된다.

웹팩을 사용하면 SVG파일과 CSS 파일도 불러와서 사용할 수 있는데 파일을 불러오는 것을 웹팩의 로더가 담당한다. 웹팩에는 css-loader, file-loader, bable-loader등이 각각 역할에 맞게 사용된다.

본론으로 돌아와서 해당 소스를 보게되면 HTML과 JS 코드가 섞여있다. 이러한 코드를 JSX라고 부른다. 자바스크립트의 확장 문법이며 XML과 비슷하게 생겼다. 결국 우리가 작성한 소스는 createElement 등의 함수로 어디선가 만들어지는데, 매번 이렇게 만들기 어려우니 함수 리턴을 사용하여 결과 값을 던져주면 리액트 라이브러리가 해당 JSX을 알아서 처리해주는 것이다.

JSX 사용 준수 사항

• 반드시 부모요소 하나로 감싸야 한다. (Virtual DOM에서 컴포넌트 변화를 감지 할 경우 내부는 하나의 DOM 트리 구조로 이루어 져야하기 때문이다)
• 자바스크립트 변수를 사용할 경우 {}안에 변수명을 입력하여 사용한다.
• 조건에 따라 다른 내용을 렌더링 해야할 경우 jsx 밖 혹은 {} 내부에서 조건 연산자를 사용한다.
• DOM 요소에 스타일 적용할 경우 객체형태로 지정한다. 또한 카멜표기법을 사용해야 한다.
• 태그는 꼭 열기와 닫기가 있어야 한다.

조건연산

import './App.css';

function App() {
  const test = "조건연산";
  return (
    <>
      {test === "조건연산" ? (
          <h1>조건이 부합합니다.</h1>
      ) : (
          <h1>조건이 일치하지 않습니다.</h1>
      )};
    </>
  );
}

export default App;

하지만 실제로 사용하다보면 위의 코드는 복잡하다. 좀 더 간결한 문장으로도 변경할 수 있다.

import './App.css';

function App() {
  const test = "조건연산";
  return (
    <>
      {test === "조건연산" && <h1>조건이 일치합니다.</h1>}
    </>
  );
}

export default App;

 

인라인 스타일링

import './App.css';

function App() {
  const test = "조건연산";
  const style = {
    backgroundColor: "blue",
    color: "white",
    fontSize: "5rem",
    fontWeight: "bold",
    padding: "1rem"
  }
  return (
    <div style={style}>
      {test === "조건연산" && <h1>조건이 일치합니다.</h1>}
    </div>
  );
}

export default App;

 

개발 시 유용한 플러그인

• ESLint : 문법 검사도구
• Prettier: 코드 스타일 자동 정리도구