리액트 설치 및 컴포넌트

리액트 입문

리액트란?

• spa 전재, virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에 리렌더링 잦은 동적인 모던웹에서 향상된 퍼포먼스를 낼 수 있음

spa

• 하나의 마크업 html파일을 받아, 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시하기에 사용자가 페이지를 다시 로딩할 필요가 없어짐(깜박임이 없음)

DOM

• 웹페이지를 우리가 사용하는 자바스크립트와 같은 프로그래밍 언어와 연결해주어 화면에 그려진 UI요소를 검색할 수 있게 해줌

virtual DOM

• 실제로 렌더링 되지는 않았지만 실제 DOM구조를 반영한 상태로 메모리에 있는 "가상의 돔", 즉 리액트가 가상돔의 변화를 실제 옴에 적용하지 않는 이상은 아무리 많은 조작이 가상 돔에 일어나도 브라우저의 렌더링을 일으키지 않는다.

batching

• 만약 10개의 DOM 요소를 수정하는 것과 같은 변경 사항들을 한번에 묶어서 실제 DOM에 반영을 하는데, 이것을 batching 이라고 한다.

종합

• 간단하게 설명하자면, 네이버 페이지에서 버튼 하나를 빨간색으로 바꾸려고 할 때에 가상돔 없이 조작하게되면 페이지 전체에 대해서 다시 그려주는 페인팅 작업을 진행한다.
  가상돔에서는 그렇지 않고, 이 버튼 하나만 빨간색으로 바뀌었구나, 알아채고 그 부분만 다시 그려주게 된다.

  ---

리액트 설치 및 실행

• 노드가 설치되어 있다면 터미널에 아래 명령어를 입력

1.  npx creat-react-app 설치파일명
2.  npm start

22.12.6 수정

npm install --global yarn

권한문제가 있어 sudo로 설치해준다.
이 후 https://create-react-app.dev/docs/getting-started 공식문서 참고하여 yarn으로 설치해주면, 기본적인 프로젝트에 필요한 모든 빌드툴들이 같이 설치된다.

yarn create react-app

설치가 되었다면 아래 명령어 중 필요한 명령어를 실행한다.

yarn start // 개발용 모드로 프로젝트를 실행
yarn build // 배포할 때 사용
yarn test // 테스트코드 실행
yarn eject // 바벨이나 웹팩 등을 내 입맛에 맞게 변경하려면 사용, "정.말" 필요할 때만 사용

나는 일단 yarn start만 사용할 것 같다.

---

컴포넌트

• 코드 조각을 떼었다 붙혔다 하면서 재사용이 용이하게 해주는 문법.
  외부에서 사용 가능하게 export를 해주고, 사용할 때에는 import를 해주어야 한다.
  return문을 기준으로 위쪽은 자바스크립트를 쓸 수 있는 영역, 아래쪽은 JSX를 쓸 수 있는 영역

function App() {
  
  //javascript 작성하는 곳
  return (
    //JSX 작성하는 곳
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          항해99 리액트 입문주차 시작
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

컴포넌트 작성 시 주의할 점

• 가장 첫 글자를 대문자로 만들어야 함.
• 이벤트는 소문자 대신 카멜케이스를 사용
• JSX를 사용하여 문자열이 아닌 "함수"로 이벤트핸들러를 전달

function App() {
  // <---- 자바스크립트 영역 ---->
  const hi = () => {
    alert('hi')
  }

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <p>이것은 내가 만든 App컴포넌트 입니다.</p>
      <button onClick={hi}>클릭!</button>
    </div>
  );
}

컴포넌트를 부모 자식 관계로 설정할 수 있다.

• 컴포넌트 안에 컴포넌트가 작성되는 경우를 뜻함

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

function App() {
  return <Child />
}

• 이런식으로 화면에 보여지게 하는 이 행위를 "렌더링" 이라고 한다.