3 min to read

리액트 시작과 기초

Featured image

리액트 시작 방법

원래 리액트는 webpack이나 babel을 설치하고 설정 해야 리액트 앱을 시작할 수 있었다 webpack: 오픈 소스 자바스크립트 모듈로 여러개 나눠져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화 한다 그렇기 떄문에 로딩에 대한 네트워크 비용을 줄일 수 있다

babel: 최신 자바스크립트문법을 지원하지 않는 브라우저에 최신 문법을 구형브라우저에서도 사용할 수 있게 변환 시키는 라이브러리 리액트를 시작하기 위해 create react app방식을 사용한다

 npm init react-app
 npm install -g create-react-app
create-react-app my-react-app
npm start

리액트란

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로 인터렉트가 많은 웹앱을 만드는데 주로 사용된다

Vue나 Angualar와 많이 비교가 된다

Vue, Angualar, react

Angular와 Vue는 프레임워크이며 리액트는 라이브러리

프레임워크란 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 라이브러리란 어떠한 특정 기능을 모듈화 해놀은것

리액트의 기본적인 구조

npx create react app 사용시 구조

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

index.html이 방문자가 사이트를 요청할때 다른 페이지가 지정되지 않은 경우 사용되는 가장 기본적인 페이지

JSX

jsx는 javascript와 xml의 조합으로 react에서 주로사용되는 문법이다 이는 html와 유사한 문법을 사용해 html의 요소를 사용할 수 있게 된다

jsx를 사용하면 자바스크립트 만으로 마크업 코드를 작성해 DOM에 배치할 수 있다

하나의 엘리멘트 안에 모든 엘리멘트가 포함되어 있어야 하고, css의 속성을 지정할려면 classname으로 표기해야한다

굳이 태그를 만들고 싶지 않으면 fragment를 쓰면 된다(이름없는 태그로 축약형 문법을 자주 사용한다)

자바스크립트를 사용하려면 중괄호로()로 감싸줘야 한다

컨포넌트

컨포넌트는 리액트의 재사용가능한 코드 단위로 클래스 컴포넌트와 함수형 컨포넌트가 있다

컴포넌트를 만드는 가장 간단한 방법은 자바스크립트 함수를 사용하는것이고 컴포넌트 함수 이름을 하나의 태그 처럼 사용할 수 있다

컴포넌트의 이름은 반드시 첫문자를 대문자로 작성해야 한다

Prop

리액트에서 컨포넌트에 지정한 속성을 부르는 방법으로 하나의 객체 형태로 함수의 첫번째 파라미터에 전달된다

컨포넌트간에 데이터를 전달하는 방법으로 부모 컨포넌트에서 자식컨포넌트로 props를 전달해 데이터를 준다

컨포넌트에 전달되는 props에 따라 랜더되는 모습을 변경할 수 있다

props에는 children이라는 프로퍼티가 있는데({props.children}) 이는 컴포넌트 작성시 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면 안에 작성된 값이 children에 담기게 된다

이를 통해 부모 컴포넌트에서 자식 컴포넌트로 요소를 전달할 수 있다 먼저 자식 컨포넌트를 정의하고 그 후 부모 컨포넌트 쪽에 import해서 부모 컨포넌트 안에 import 해서 사용한다

status

status란 리액트에서 상태가 바뀔때마다 화면을 새롭게 그러내는 방식으로 동작한다 이는 컴포넌트내에서 동적 데이터를 관리하는 방법으로 상태가 변경되면 컴포넌트는 자동으로 다시 랜더링 된다

status를 만들고 바꾸기 위해서는 useState 함수를 사용해야 한다

useState 함수는 함수형 컨포넌트 내에서 상태를 관리하고 변경할 수 있게 해주는 리엑트 훅이다

보통 구조분해 문법을 사용해 작성되며 초기값을 아규먼트로 받고 그에 따른 결과로 요소 2개를 가진 배열 형태로 리턴하는데 이때 첫번째 요소가 status이고 두번째가 이 요소를 바꾸는 setter 함수이다

새로운 값으로 할당하는 방식이 아니라 setter함수를 활용하는데 이는 호출할때 전달하는 아규먼트 값으로 status 값을 변경해준다

리액트 훅

리액트 훅이한 함수형 컨포넌트에서 상태와 생명주기 기능을 쉽게 사용할 수 있게 해주는 함수로 사용하면 클래스형 컨포넌트 없이도 상태관리와 생명주기 기능을 쉽게 구현 할 수 있다