[9주차] 1. 리액트 입문(1)

리액트 입문

리액트가 만들어진 이유

• Javascript를 사용한 DOM 변형
• DOM : 각 html element 정보를 지니고 있는 JS 객체
• Ember, Backbone, AngularJS 등의 프레임워크는 작동방식이 다르지만 자바스크립트 특정 값이 바뀌면 특정 DOM 속성도 바뀌어서 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결해줌
• 리액트는 어떠한 상태가 바뀌었을 때 DOM을 어떻게 바꿀지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 걸 새로 만들어 보여주면 어떨까라는 아이디어에서 시작된 라이브러리이다. 그러면 업데이트를 어떻게 해야할 지를 전혀 고민할 필요가 없어지기 때문에 개발이 정말 쉬워질 것이다.
• 리액트는 Virtual DOM을 사용해 성능은 유지하되 업데이트 고민을 없애면서 빠른 속도를 가능케 했다.
• Virtual DOM : 가상의 DOM으로 브라우저에서 실제로 보여지는 DOM이 아닌 메모리에 가상으로 존재하는 DOM으로써 자바스크립트 객체이기 때문에 작동 성능이 브라우저에서 실제 DOM을 보여주는 것보다 속도가 훨씬 빠르다.
• 리액트는 상태가 업데이트 되면 업데이트가 필요한 UI를 메모리에 있는 virtual DOM에다가 랜더링 한다. 그러고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 사용해서 실제 브라우저에서 보여지고 있는 DOM과 메모리에 있는 virtual DOM를 비교를 하고 차이점을 감지 후 그 차이점을 실제 DOM에다가 Patch(차이를 확인해서 필요한 변화를 반영시켜줌)를 해줌. 이를 통해서 리액트는 정말 필요한 변화만 발생시키게 되면서 업데이트를 어떻게 해야할지에 대한 고민을 하지 않으면서도 빠른 성능을 지켜낼 수 있게 됨
• 리액트를 사용하여 웹개발을 할 때는 UI가 어떻게 보여지는 지에 대하여 집중해야 한다.
• 리액트는 UI를 컴포넌트를 사용해서 선언한다.
• 컴포넌트는 input이 있으면 output을 만들어 내는 일종의 UI 조각이다. 다양한 기능들이 들어있다.

작업환경

• code sandbox 사용해도 됨(파란색- open react)
• node js : 브라우저 환경이 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임이다. 리액트 사용시 필요한 webpack, babel 등이 이것을 기반으로 만들어져있기 때문에 꼭 설치해야 함, 설치 시 npm도 같이 설치 됨
• yarn : 자바스크립트 패키지를 매니징 하는 도구, npm과 비슷하다. 자바스크립트 패키지를 설치할 때 npm보다 더 빠른 속도로 다운로드 받을 수 있게 해줌
• git for windows 설치 시 git bash 도구가 내장되어있다. 이 도구가 window에서도 unix 기반 명령어를 사용할 수 있게 해준다.
• git bash
  • 잘 설치되어 있는지 확인하기(git bash)
    •  
    • node --version

    • yarn --version

  • 현재 어디에 있는 지 확인 :

    pwd​

  • 개발 서버 끄기

    ctrl + c​

리액트 프로젝트 생성

• git bash
  • 리액트 프로젝트 만들기 :

    npx create-react-app 프로젝트이름​

  • 현재 폴더에 뭐가 있는지 확인 :

     ls​

  • yarn 실행(리액트 프로젝트 폴더에서) :

    yarn start​

• 리액트 프로젝트 생성 후 yarn 실행하고 나면 브라우저 창이 하나 뜨면서 빙글빙글 돌아가는 리액트 로고가 보인다면 리액트 프로젝트 만들기 성공!
• 리액트 프로젝트 폴더 안 파일들 수정하면 브라우저가 그거에 맞춰서 변화됨

리액트 컴포넌트

• 새로운 JS 파일 생성시 상단에 import React from 'react'; 를 적어서 리액트를 사용하겠다는 것을 명시해줘야 함
• 만드는 방법은 함수 형태로 만들기, 클래스 형태로 만들기로 총 두가지가 있다.
• 컴포넌트 이름은 대문자로 시작하고 단어가 이어질 때는 다음단어를 대문자로 첫글자를 작성
• App.js 상단에 react 불러오는 코드 밑에 컴포넌트 불러오는 경로 작성
  :

  import 컴포넌트이름 from ‘컴포넌트 위치한 경로‘;​

• 컴포넌트 만들면 불러와서 사용 가능 <컴포넌트이름 />로 불러오기
• 페이지에서 id가 root인 것을 찾아서 react App을 그 안에다가 넣겠다를 의미, 즉 리액트 컴포턴트가 랜더링 될 때는 App.js에서 function App(){}안에 있는 것들이 html 형태로 만들어져서 public 폴더 안 index.html에서 id가 root인 div요소에 이 코드가 삽입된다는 뜻
  

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );​

JSX

• 리액트 컴포넌트 생김새를 정의할 때 사용하는 문법
• babel
• babel 이라는 도구를 사용해서 html 문법을 자바스크립트로 변환하는 것
• createElement 함수가 컴포넌트를 만드는 문법인데 컴포넌트를 만들 때마다 매번 이 함수를 호출하는 것은 어려우므로 JSX를 사용해서 html 형식으로 작성하면 이것을 JS로 변환하게끔 하는 작업을 babel이라는 도구가 대신 해주고 있는 것이다.
• https://babeljs.io/ 의 try out에서 html 문법을 자바스크립트로 변환해 볼 수 있다.

JS로 제대로 변환하기 위한 규칙

• 태그는 무조건 꼭 닫혀 있어야 함 ex)
   
• input, br 등의 열린 태그들은 self-closing tag를 사용하여 <이름 />로 표현 ex)<input />
• 2개이상의 태그는 꼭 무언가로 감싸져 있어야 함
• fragment: 비어있는 이름을 가진 태그, 감싸기 애매한 상황(디자인이 꼬인다거나 할 때 등)에서 사용, 불필요한 태그 발생 방지
  : <>2개이상의 태그들</>
• 괄호는 가독성을 위해서 사용하는 것이라 굳이 작성하지 않아도 됨
• JSX 내부에서 어떠한 자바스크립트 값을 보여주고 싶을 때는 그 값을 중괄호로 감싸주면 된다.

스타일과 클래스 이름 설정하는 방법

• 객체를 만들어 줘야 함
  const 객체이름 = { css 문법 작성(쉼표로 속성 구분) }
• 객체 안에 css 문법을 작성하는 데 css 속성 중 -로 구분되어 있는 속성(ex)background-colot)은 Camel 표기법(ex) backgroundColor)으로 표시한다.
• 기본단위는 px
• 따로 단위를 넣어주고 싶을 경우 문자열로 숫자와 함께 쓰면 됨 ex) ’1rem’
• 스타일을 JSX 내부 코드에 적용하는 법
  • 객체형태로 넣어줘야 함
    <태그이름 style={스타일코드가 입력된 객체이름}>내용</태그이름>
• css 클래스 적용 방법
  1. css 파일 불러오기 : import ‘css파일 경로‘
  2. <태그이름 className=”css 클래스 이름”} 내용</태그이름>

주석 작성하는 법

• {/*주석 내용*/}로 작성
• 태그 열리는 부분에서는 //주석내용 으로 작성 가능 ex) <태그이름 //주석내용><태그이름/>

react 컴포넌트의 props

• props : properties의 줄임말로 컴포넌튼 사용시 특정 값을 전달해주고 싶을 때 사용
• 컴포넌트에게 값 전달하기
• <컴포넌트이름 props />
• App.js에서 jsx로 작성된 컴포넌트에 작성된 props는 해당 컴포넌트 파일의 함수 parameter를통해 받아올 수 있는데 비구조화 할당 시 바로 추출해서 사용할 수 있고 기본값을 설정하고 싶을 때는 defaultProps를 이용한다. 해당 컴포넌트 파일에서 작성된 {children} 이라는 것은 App.js에서 jsx로 작성된 컴포넌트 내용을 의미한다.
• 컴포넌트 내에서 값 사용하고 싶을 때
  1. APP.js의 JSX 내부에서<컴포넌트이름 변수=값 />
  2. APP.js의 JSX 내부에서 컴포넌트에 준 값을 사용하고 싶을 시 해당 컴포넌트가 정의되어 있는 JS의 함수에 파라미터로 props 주기(APP.js의 JSX 내부에서 컴포넌트에 준 값들이 객체 형태({key : value})로 들어가게 된다
  3. JSX 내부에서 컴포넌트에 준 값 컴포넌트 내부에서 보여주고 싶을 때
     {props.컴포넌트에 넣어준 변수}
• 컴포넌트 인라인 스타일로 css 작성 시
  • 1. APP.js의 JSX 내부에서<컴포넌트 css속성=값 />작성
    2. 해당 컴포넌트 JS의 함수 안 JSX내부에서
       <태그이름 style={{css속성: props.컴포넌트에 넣어준 css 속성}}><태그이름>작성
       • 중괄호로 두번 감싸는 이유 : 객체라서 한번, 자바스크립트 값이니까 한번 더
• 비구조화 할당(구조분해) 사용시
  • 해당 컴포넌트 js에서 함수 parameter로 app.js에서 JSX 안 컴포넌트 부분에서 준 값들의 key 부분 입력
  • css속성의 경우 속성이름만 적어도 됨
• 컴포넌트에 준 값의 기본 값 지정 방법
  • defaultProps : 특정 값을 빠뜨렸을 때 기본값으로 사용할 값

  • 컴포넌트이름.defaultProps {
    	컴포넌트값 : 기본값
    };

• Props.children
• 태그가 아닌 컴포넌트 작성시 안에 넣는 값을 조회하기 위해 사용하는 것
• app.js의 컴포넌트 내부에서 코드로 작성된 내용을 보여주고 싶을 때 해당 컴포넌트 파일의 함수 parameter로 { children } 값 넣고 해당 컴포넌트 파일의 함수에서 JSX 내부에서 태그 내용으로{ children }으로 작성하면 불러올 수 있음
• children 이라는 props에 App.js의 컴포넌트 내부 내용을 받아온 것이다.

조건부 렌더링

• 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것
• props 이름만 넣고 값을 넣지 않았을 경우 자동으로 true가 값으로 설정됨구현 방법
• 삼항연산자 사용
• true나 false에 따라서 내용이 달라질 때 사용(값에 따라서 보여줘야하는 값이 아예 다를 경우)
• 사용 방법
  1. App.js에서 컴포넌트 props 작성하고 비구조화 할당으로 해당 컴포넌트 파일의 함수 parameter로 그 props 가져옴
  2. 사용할 공간에 {props이름 ? true 내용 : false 내용}

&&(AND 연산자) 사용

• 단순히 어떤 값을 숨기고 보여주고 할 경우 사용
  1. App.js에서 컴포넌트 props 작성하고 비구조화 할당으로 해당 컴포넌트 파일의 함수 parameter로 그 props 가져옴
  2. 사용할 공간에 {props이름 && true 내용 } 작성시 props 값이 true 일때만 true 내용 출력하고 false일시 아무것도 출력하지 않음

useState

• useState 함수를 사용해서 바뀌는 값을 관리할 수 있게 되고 이값의 기본값은 이 함수의 parameter로 넣으면 됨. 또한 이 함수는 배열을 반환하게 되는 데 첫번째 원소는 현재 상태, 두번째 원소는 이 원소를 바꾸는 함수를 지정하고 이 함수에다가 새로운 상태를 넣어서 호출해주면 첫번째 원소 값이 바뀌게 되고 그 바뀌는 값을 jsx 안에서 중괄호로 묶어 작성하면 나타나게 됨
• 컴포넌트 파일 안에서 import React, { useState } from ‘react’; 로 작성(react에서 useState 함수 불러오기)
• 두번째 원소 함수 parameter에는 아예 어떤 값으로 바꿀 거라는 다음상태를 넣어줄 수 도 있고 로직으로 상태를 업데이트 할거라는 함수를 넣어줄 수도 있다.
• 동적 관리할 컴포넌트 안에서 비구조화 할당을 통해서 표현함
  const [원소, 원소] = useState(기본값); 으로 기본값 설정
  • 대괄호 안에 있는 원소(상태)를 만들건데 원소(상태)의 기본값은 useState 괄호 안의 값으로 하겠다는 뜻
  • useState 호출 시 배열로 반환하게 되는데 첫번째 원소를 const 대괄호 안에 정의된 첫번째 원소이름으로 설정하고, 두번째 원소를 const 대괄호 안에 정의된 두번째 원소이름으로 설정하면서 계속 이런 식으로 함
• hooks 기능 중 하나
• 컴포넌트에서 바뀌는 값(동적상태) 관리하기
• 컴포넌트에서 보여줘야 하는 내용이 사용자 interaction에 따라 바뀌어야 할 때 구현 방법
• hooks 기능 되면서 함수형 컴포넌트에서도 관리할 수 있게 됨

이벤트 설정

• 이벤트 설정해주려는 컴포넌트 파일에서 jsx 문법 안 태그 속성으로 이벤트이름={함수이름} 작성
• 함수를 값을 넣어줄 땐 함수() 가 아닌 함수이름만 넣어줌(함수를 넣어주는 것이지 호출해주는 것이 아니기 때문), 리액트는 자바스크립트 등과 다르게 함수 호출x

함수형 업데이트

• 두번째 원소 함수에 첫번째 원소를 어떻게 업데이트 할지에 대한 함수를 넣어 줄 수 있다.
• 리액트 컴포넌트를 최적화하는 단계에서 함수형 업데이트를 하는 것이 필요하다
• 업데이트 함수
  두번째 원소 함수이름(새로운변수 => 새로운 변수를 사용해 업데이트할 값)
• 첫번째 원소에 => 다음 값이 들어가게 된다.

input 상태 관리하기

 

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  // 수정 이벤트 발생시 그 내용이 이벤트 객체(e)를 parameter로 받아와서 사용할 수 있게 함
  const onChange = (e) => {
      //console.log(e.target);//이벤트가 발생한 DOM(정보)를 가지고 있음
      //console.log(e.targat.value);//이벤트가 발생한 DOM(정보)의 값을 가지고 있음, 현재 input이 가지고 있는 값 

      setText(e.target.value);
  };

  const onReset = () => {
      setText('');
  };

  return (
      <div>

          <input onChange={onChange} value={text}/>{/*value값을 설정해줘야 나중에 초기화 버튼을 눌러 input을 바꿨을 때도 input에 있는 값이 비워지게 됨 */}
          <button onClick={onReset}>초기화</button>

          <div>
              <b>값: </b>
              {text}
          </div>
      </div>


  )

}
export default InputSample;

 

Tips

• 자동완성으로 컴포넌트 파일 불러오기 : JSX 내부에서 <컴포넌트 치고 탭 치면 자동완성으로 컴포넌트 파일 불러오는 코드가 상단에 작성됨
• jsx 내부에서 falsy한 값인 null, false, undefined은 렌더링시(중괄호로 감싸주는 것을 의미) 브라우저에 아무것도 안나옴, 하지만 예외로 0은 렌더링시 그대로 숫자로 브라우저상에 나타남
• 리액트에서는 자바스크립트와 다르게 이벤트 이름이 camel 표기법으로 작성
• react dev tools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko)
  • 설치 시 개발자 도구 열면 오른쪽에 react 문양이 있는 개발자 탭을 볼 수 있다.
  • 설치 후 크롬 설정 들어가서 확장 프로그램 메뉴에서 설치된 react dev tools 세부정보에서 파일 url에 대한 엑세스 허용을 해줘야지 개발자 도구에서 사용 가능