014 dev log

자주 쓰이는 html은 Component에 담아서 호출하여 편하고 깔끔한 html 작성이 가능하다

Component 생성

// function은 대문자로 시작하도록
// return 안에는 하나의 div값 안에 넣을것 
function Modal(){ 
  return (
    <div className='modal'>
      <h4>title</h4>
      <p>date</p>
      <p>content</p>
    </div>
  )
}

Component 사용

<함수명></함수명>

<Modal></Modal>

프로젝트 생성

프로젝트 파일에서 shift를 누른채로 우클릭 후 PowerShell 창 열기를 클릭

파워쉘에서 아래 명령어를 실행한다

npx create-react-app {프로젝트명}

성공!

프로젝트 구조

VS Code에서 프로젝트를 실행시켜보면 아래와 같은 구조가 있는데 역할도 잘 알아두자

node_modules : 라이브러리 코드를 보관하는 곳

public : static 파일 모아놓는 곳

src : 소스코드 모아놓는 곳

package.json : 프로젝트 정보

React 공식사이트

https://ko.legacy.reactjs.org/

React의 정의

공식사이트에는 사용자 인터페이스를 만들기 위한 Java Script 라이브러리라고 정의되어 있다

즉, Java Script에서 사용자 UI를 만들기 위해 자주 사용되는 기능들을 가져다 쓸수 있는 모음집이라고 할 수 있다

React의 장점

• 빠른 업데이트(페이지가 변경 속도)와 렌더링 속도 - React는 virtual dom을 사용하여 변경사항이 있을때 dom 전체를 변경하는 것이 아니라 변경된 부분만 업데이트한 후 랜더링을 하기 때문에 페이지 변경 속도가 빠르다
• Component 기반의 구조 - React에서는 모든 페이지가 Component(구성요소)로 구성되어 레고 처럼 각각의 Component를 조합하여 개발 할 수 있다
• 재사용성 - 위에서 말한 것과 같이 Component 구조로 같은 컴포넌트를 다양한 곳에서 사용가능하며, 개발 시간이 단축되며, 유지보수가 용이하다 

React의 단점

• 방대한 학습량 - 새로운 개념들이 많고, 버전 업데이트시 변경된 내용을 학습해야한다
• 높은 상태관리 복잡도 - state라는 개념이 있는데 성능 향상을 위해 state를 잘 관리해야한다고 한다(이건 실제로 써봐야 알것 같다) 때문에 규모가 큰 프로젝트에서는 상태관리 라이브러리를 사용하기도 한다고 한다

출처

인프런 - 소플님 '처음 만난 리액트(React)'

Node.js 설치

https://nodejs.org/en

위 링크에 접속하면 아래와 같은 화면이 뜨는데, 왼쪽은 안정화된 버전이고 오른쪽이 최신 버전이다

취향에 맞게 설치하면 되지만 보통은 안정화를 많이 설치한다