React

프최's log·2020년 10월 5일
0

React

목록 보기
1/5
post-thumbnail

What is React?

 유저와 많은 인터랙션이 발생함으로 인하여 상태 변화 관리가 필요해졌다. 이러한 상태 변화 관리에 대한 부담이 커지다보니 개발자가 좀더 '기능 개발'에 집중하기 위한 환경이 요구되었고, 이에 따라 많은 프레임워크와 라이브러리가 나타났다. React는 그렇게 나타난 라이브러리 중 하나이다.

  • React는 Facebook에 의해 만들어진 오픈소스 프로젝트사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.
  • React는 ES6를 기반으로 활용되며 JSX문법을 사용한다.

React와 Virtual DOM

Virtual DOM은 가상의 DOM으로 변화가 일어나면 실제 브라우저에 DOM을 넣는 것이 아니라, 자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이다. 앞서 React 탄생 배경에서 언급했던 '유저의 인터랙션에 의한 상태 변화로 인한 비효율성'을 최소화하기 위해 탄생하게 된 것이다. → 연산 횟수 감소 = 연산 비용 감소

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가?


React의 특성

  • Components : 하나의 의미를 가지는 독립적인 모듈로써, 커스텀이 가능한, 즉 사용자 정의 태그이다. UI를 구성하는 개별적 뷰 단위로 볼 수 있다.
    • 복잡성을 낮추고 가독성을 높힌다
    • 재사용성(reusable)이 높고, 유지보수가 쉽다.

JSX

JSX는 (Javascript + XML)는 XML 형식의 값을 반환해주는 자바스크립트 확장 문법이다. XML 형태로 코드를 작성하면 babel이 JavaScript 형태로 반환을 해주는데 이 모양이 어떤지 확인하고자 한다면 '여기' 를 클릭하여 확인할 수 있다. React에서 JSX문법을 활용한다면 반드시 JSX로 반환해야한다.

JSX 주요 규칙★

  • 반드시 하나의 엘리먼트 안에 모든 엘리먼트 포함되어야 한다.
  • 자바스크립트 코드 사용 시, 중괄호 {} 안에 작성한다
  • if문 사용을 할 수 없기 때문에, IIFE 혹은 삼항연산자를 활용한다
  • 엘리먼트 클래스 사용 시, className 으로 표기하여 사용한다. → ES6에서 Class가 존재하기 때문

① JSX에 표현식 포함하기

JSX의 중괄호 안에 유효한 모든 Javascript 표현식을 넣을 수 있다.

  • 변수 선언을 통한 JSX 활용
const name = 'Josh Perez';
//name 이라는 변수를 선언 후, 중괄호로 감싸서 사용했다.
const element = <h1>Hello, {name}</h1>;
  • 함수 호출을 통한 JSX 활용
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
//엘리먼트 안에 formatName 함수 호출 사용
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.

② JSX 속성 정의

  • 따옴표(")를 이용해 문자열 리터럴을 정의하거나, 중괄호를 사용하여 속성(어트리뷰트)에 Javascript 표현식 삽입도 가능하다.
  • 어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하면 안 된다. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안 된다.

③ JSX로 자식 정의

  • 태그가 비어있다면 XML처럼 />를 이용해 바로 닫아줘야한다.
    const element = <img src={user.avatarUrl} />;
  • 자식을 포함할 수 있다.
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 소개 - 공식문서


JSX없이도 사용 가능한가?(Advanced)

빌드환경에서 컴파일 설정을 하고 싶지 않을 때, JSX없이 React를 사용하는 것이 특히 편리하다.

각 JSX 엘리먼트는 React.createElement(component, props, ...children) 를 호출 하기 위한 문법 설탕(syntactic sugar) 이다. 그래서 JSX로 할 수 있는 모든 것은 순수 JavaScript로도 할 수 있다.

//JSX코드
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

//JSX를 사용하지 않는 코드
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

JSX 없이 사용하는 React - 공식문서
JSX 이해하기 - 공식문서


React 사용하기

React를 사용하기 앞서, Codesandbox 를 통해 React를 간접적으로 체험할 수 있다. 이를 통해서 연습을 진행해보고, 실제 내 컴퓨터에 React 개발환경을 구축하여 활용해나갈 수 있다.

React 설치(recommend)

공식에서 추천하는 npx를 사용하도록 하자. npm install -g create-react-app도 가능하지만, npx는 컴퓨터 공간을 차지 하지 않게 한번만 설치 후 삭제가 되고, 설치 할 때마다 새롭게 깔리기 때문에 항상 최신 상태를 유지 시켜준다.

npx create-react-app my-app
cd my-app
// 아래 명령어를 통해 http://localhost:3000 가 실행되고 react 샘플웹화면이 잘 보인다면 설치가 성공!
npm start
// 또한 아래 명령어를 통해 버전 확인 가능
create-react-app -V

폴더를 이미 만들었다면, 폴더 안에 들어가서 터미널 실행 후, create-react-app . 을 눌러주면 해당 폴더 안에서 react 환경 세팅을 진행해줄 수 있다.

Create React App - Getting Started


기본 구조와 흐름 이해하기

앞서 Codesandbox나 vs 코드 안에서 볼 수 있는 기본 구조를 그려보았고, 흐름은 아래와 같다.

  1. src 폴더 안에 App.js 라는 리액트 컴포넌트를 제작 한다.
  2. src 폴더 안에 index.js에서 ReactDOM.render 를 이용하여
  3. 커스텀된 태그인 <App /> 를 렌더링하도록 public 폴더에 있는 index.html에 전달한다.
  4. index.html 의 <div> 요소 'root' 안에 리액트 컴포넌트가 들어가 브라우저에 출력된다.

그럼 각각의 역할들에 대해서 좀더 자세하게 알아보자.

  • 엘리먼트 : React 앱의 가장 작은 단위로 일반 객체(plain object)이다. 엘리먼트는 컴포넌트의 구성요소이므로 헷갈리지 말자.
  • ReactDOM.render : 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트(React 엘리먼트들)를 렌더링하는 역할
  • root : <div id="root"></div> 안에 들어가는 모든 엘리먼트는 ReactDOM에서 관리하기 때문에 이를 루트(root) DOM 노드라고 부른다.

컴포넌트(Components)

함수 컴포넌트, 클래스 컴포넌트

React 안에서 컴포넌트를 정의하는 방식은 2가지가 있다.

  • 함수 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • 클래스 컴포넌트(ES6)
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

props

  • properties의 줄임말인 prps는 데이터 단일 객체이며 속성을 나타낸다. props는 읽기 전용 이다.
  • 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수(Pure function)처럼 동작해야 한다.
  • React 엘리먼트를 DOM태그로도 나타낼 수 있지만, 사용자 정의 컴포넌트로도 나타낼 수 있다.
    const element = <Welcome name="Sara" />;
  • 소문자로 시작하는 컴포넌트는 DOM 태그로 처리하기 때문에, 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 한다. 관련링크

순수함수 : 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수

여러 개의 props 구조분해할당

props 내부의 값을 조회 할 때마다 props. 를 입력하고 있는데, 함수의 파라미터에서 비구조화 할당 (혹은 구조 분해라고도 불립니다) 문법을 사용하면 조금 더 코드를 간결하게 작성할 수 있다.

//props로 할당
function Hello(props) {
   console.log(props);
   return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>;
}
//구조분해할당
function Hello({name, color}) {
  console.log(arguments);
  return <div style={{ color }}>안녕하세요 {name}</div>;
}

defaultProps : 기본값 설정하기

props를 지정하지 않았을 때, 기본적으로 사용할 값을 설정하면 defaultProps를 설정한다.

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고자 할 때는 props.children을 조회하면 된다.


Fragments

React에서 컴포넌트가 여러 엘리먼트를 반환하고자 할 때, DOM에 별도의 노드를 추가하지 않고 여러자식을 그룹화할 수 있는데 이것이 바로 Fragments이다.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

//단축문법
class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

Fragments - 공식문서


state

 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값으로 '상태'라고 하는데 알 수 없는 '비공개된' 부분이며 컴포넌트에 의해 완전히 제어된다. 이를 소유한 컴포넌트 이외에는 어떠한 컴포넌트가 접근할 수 없어서 '로컬' 또는 '캡슐화'라고 불린다.

props는 인자처럼 외부로부터 전달받은 값이지만 state는 내부에서 변화하는 값이다.

언제 이 두가지를 활용해야하는지 잘 알아야한다. 자세한 차이점을 알아보자.


state와 props의 차이점

state와 props의 형태는 '객체'이며, 렌더링 결과물에 영향을 주는 정보를 갖고 있는 것이 공통점이지만, 차이점이 있다.

  • props : 함수 매개변수처럼 컴포넌트에 전달 되며, 컴포넌트의 생명주기동안 절대 값이 변경되면 안 된다.(immutable & pure)
  • state : 함수 내 선언된 변수처럼 컴포넌트 안에서 관리 며 값을 변경할 수 있다.(changeable)
propsstate
부모컴포넌트로부터 초기값을 얻을 수 있는가?YESYES
부모컴포넌트에 의해 변경될 수 있는가?YESNO
컴포넌트 내부에서 초기값을 설정할 수 있는가?YESYES
컴포넌트 내에서 변화할 수 있는가?NOYES
하위 컴포넌트에서 초기값을 설정할 수 있는가?YESYES
하위 컴포넌트를 변경할 수 있는가?YESNO

출처
props vs state
ReactJS: Props vs. State


state에 대한 추가내용으로 넘어가기 → React - state & Lifecycle


조건부렌더링

  • 논리 && 연산자로 If를 인라인으로 표현하기
  • 조건부 연산자로 If-Else구문 인라인으로 표현하기

리스트와 Key

  • 컴포넌트 안에 리스트를 렌더링한다. 배열을 사용해서 활용할 수 있다.

  • 경고 메세지 : Warning: Each child in a list should have a unique "key" prop.

리스트의 각 항목에 "key"를 넣어야한다는 경고 표시인데, 이 누락 문제를 해결하기 위해서는 리스트의 각 항목에 "key"를 부여해줘야 한다. 그렇다면 "key"는 무엇일까?

Key

“key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트를 나타낸다. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 역할을 하며, 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. 리스트의 개별 항목을 고유하게 식별할 수 있기 위해 대부분 데이터의 ID 를 key로 사용한다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스(index) 를 key로 사용할 수 있지만 권장하지 않습니다

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

css

  • 인라인스타일
    • 객체 형태 작성
    • background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍
function App(){
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
  }
 
 return (
   <div style={style}>{name}</div>
 );
}
  • CSS class 설정
    • import "./파일명.css" 로 CSS를 연결해준 후, className을 통해 스타일을 할당해주면 적용된다.

주석처리

JSX 내부의 주석은 {/* 이런 형태로 */} 작성해야한다. 중괄호로 작성하지 않으면 주석이 보인다.

열려있는 내부 태그 안에서는 //를 써서 활용할 수 있다.


React 활용을 위한 추가 설치

VS코드 확장 : Babel 언어 설정

ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 “Babel” 언어 설정을 사용하는 것을 권장한다고 공식문서에 나와있다.

React Developer Tools

크롬 확장을 통해, 좀더 React 를 디버깅하거나 쉽게 사용해나갈 수 있다.

설치를 완료하면 크롬 개발자 툴안에 "⚛️ Components" 과 "⚛️ Profiler" 탭이 추가되어 있는 것을 확인할 수 있다.

Components 탭에서는 root React 컴포넌트를 확인할 수 있다.

React Dev Tools 설치하기 - 크롬


React 입문용 참조사이트
1. ★공식문서
2. React - 생활코딩 Youtube , 홈페이지
3. 벨로퍼트와 함께하는 모던 리액트


profile
차곡차곡 쌓아가는 나의 개발 기록

0개의 댓글