react 시작하기

react

페이스북에서 만든 라이브러리로 편하게 웹개발을 할 수 있도록 도와준다.

node.js

웹 브라우저 뿐만 아니라 자체적으로 프로그램을 만들어서 실행할 수 있도록 나온 기술
대표적으로 서버 프로그램을 개발할때 많이 사용함

nmp (node package manager)

노드 프로젝트의 패키지를 관리해주는 저장소 역할

babel, webpack

node.js는 화면을 그려주는 역할이 없기 때문에 웹 빌드도구를 이용해
브라우저가 이해할 수 있는 언어로 바꿔주는 작업이 필수이다.

react 사용 준비 및 설치

1. node.js 설치 (npm 함께 설치)
2. react 프로젝트 만들기

npm install -g create-react-app
create-react-app .
npm start 

웹 브라우저가 실행되는 것을 볼 수 있다.

컴포넌트 생성 맛보기

src 디렉터리에서 작업을 한다.
src/app.js의 내용이 웹브라우저에 표시되고 있음을 확인할 수 있다.

1. src에 예제로 child.js를 생성하고 다른 곳에서 사용할 수 있도록 export 해준다.

컴포넌트는 함수로 구성하고 ui요소를 return해야 한다.

src/child.js 파일 생성

function ChildComponent() {
  return <p>나는 자식이다</p>;
}

export default ChildComponent;

2. src/app.js에서 child에서 만든 내용을 가져다 사용할 수 있도록 import해준다.

src/app.js
import ChildComponent from "./child.js";

3. fuction app에서 ChildComponent를 가져와본다.

예제로 return에 컴포넌트를 추가했다.

return (
    <div>
      <p>안녕하세요</p>
      <ChildComponent />
      <ChildComponent />
      <ChildComponent />
      <ChildComponent />
    </div>
  );

4. jsx 문법을 사용한다. {}를 사용하는 형태이다.

 const text = "화이팅";
  const sayhello = function () {
    return <h3>너무 졸려</h3>;
  };
  const sayhello2 = function () {
    alert("hi");
  };
  return (
    <div>
      <p>안녕하세요</p>
      <h2>{text}</h2>
      {sayhello()}
      <div onClick={sayhello2}>클릭!</div>
      <div
        onClick={function () {
          alert("hi2");
        }}
      >
        클릭2!
      </div>
      <ChildComponent />
      <ChildComponent />
      <ChildComponent />
      <ChildComponent />
    </div>
  );

생각
프론트 개발자가 되려면 웹프레임워크를 적어도 1개는 사용해 봐야 한다고는 하는데, 그동안 이름만 들었던 react를 처음 사용해봤다.
재사용 측면에서 활용도가 높을것 같다.
문법은 어렵지 않으면서 기존 사용법과는 또 달라서 혼란스럽긴하다.
회사에서도 react 도입을 한다고 해서 열심히 공부해봐야겠다!