React

Judo·2020년 12월 31일
React
0

등장 배경

복잡한 상태 관리를 해결하고 기능 개발에만 집중하기 위해
React는 컴포넌트에 집중하고 있는 프론트엔드 라이브러리
UI를 만들기위한 JS library

  • component : 하나의 의미를 가진 독립적인 단위 모듈, 쉽게 말해 나만의 html 태그
  • 코드가 직관적이고 재활용성도 높아짐
<div class="tweet">
	<span class="userId>@walli</span>
    <div class="contants">hello, my name is walli</div>
    <div class="time">43 seconds ago</div>
</div>

//컴포넌트로 짠 코드
<Tweet userId="Walli" time="43">
	hello, my name is walli
</Tweet>

React를 시작하기 전에 알아야할 것

ES6, JSX

ES6

  • Destructuring
  • spread operator
  • rest parameters
  • default parameters
  • template literals
  • arrow function
  • for-of loop

JSX

  • 자바스크립트의 확장 문법

  • JSX 문법을 사용하여 코드를 작성하면 바벨이 JS 코드로 변환시켜준다.

  • JSX는 JS로 변환되어야 하기 때문에 작성 규칙이 있다.

    • 반드시 하나의 엘리먼트로 감싸야 한다.
      <div>
    <div>
        <h1>hello</h1>
    </div>
    <div>
        <h2>walli</h2>
    </div>
  </div>
    • 자바스크립트 코드를 적용할 땐 {}안에 작성한다.
    class App extends Component {
  render() {
   const name = 'walli';
   return {
     <div>
        hello{name}!//{}사용
     </div>
   };
  }
}
    • JSX 내부에선 if문을 사용할 수 없다. IIFE or 삼항연산자 사용
    <div>
  {
    (1 + 1 === 2) ? (<h1>정답</h1>) : (<h1>탈락</h1>)
  }
</div>
    • 엘리먼트의 클래스 이름을 적용할 때, className을 사용(ES6의 class와 겹치기 때문에) 
    <div className='app-container'>hello</div>

JSX도 표현식이다.

  • 컴파일이 끝나면, JSX 표현식이 정규 JS 함수 호출이 되고, JS 객체로 인식된다.
  • 즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.

JSX 속성 정의

  • 속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.
const element = <div tabIndex="0"></div>
  • 중괄호를 사용하여 attribute에 JS 표현식을 삽입할 수 있다.
const element = <img src={user.avatarUrl}><img>/
  • JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

JSX 자식 정의

  • JSX 태그는 자식을 포함할 수 있다.
const element = {
	<div>
    	<h1>Hello!</h1>
    	<h2>Good to see you here</h2>
    </div>
}

JSX는 주입 공격을 방지한다.

  • 모든 항목은 렌더링 되기 전에 문자열로 변환되기 때문에 XXS 공격을 방지할 수 있다.

JSX는 객체를 표현한다.

  • Babel은 JSX를 React.createElement() 호출로 컴파일한다.

  • React.createElement() 는 인자로 주어지는 타입에 따라 새로운 React 엘리먼트를 생성하여 반환한다. JSX로 작성된 코드는 React.createElement() 를 사용하는 형태로 변환된다.

  • 아래 뒤 코드는 동일하다.

const element = (
	<h1 className="greeting">
      Hello, world!
    </h1>
);

const element = React.createElement(
  'h1', 
  {className: 'greeting'},
  'Hello, world!'
);
  • React.createElement는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 다음과 같은 객체를 생성한다.
const element = {
 type: 'h1',
 props: {
   className: 'greeting',
   children: 'Hello, world!'
 }
};
// 이러한 객체를 "React 엘리먼트" 라고 하며, 화면에 표시하려는 항목에 대한 설명이다.
// React는 이러한 객체를 읽은 후 DOM을 구성하고 최신으로 유지하는데 이러한 객체를 사용한다.

엘리먼트 렌더링

엘리먼트는 React 앱의 가장 작은 단위

//index.html
<div id="root"></div>
  • 엘리먼트는 화면에 표시할 내용을 적는다.
  • React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달 
const element = <h1>Hello, world</h1>
ReactDOM.render(element, document.getElementById('root'));
  • 엘리먼트와 컴포넌트의 차이점?
    • 엘리먼트는 컴포넌트의 구성요소

렌더링 된 엘리먼트 업데이트 하기

  • React 엘리먼트는 불변객체다.
//index.html
<div id="root"></div>
function clock () {
  const element = (
    <div>
      <h1>Hello, world</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
//setInterval이 실행될 때마다 element를 생성하고 루트 DOM 노드에 렌더링하는 방식으로 업데이트
}

setInterval(clock, 1000);
  • React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트 한다.
  • 매번 UI를 다시 그리는게 아니라 React DOM은 내용이 변경된 텍스트 노드만 업데이트를 알아서 한다.
  • React안에 있는 div들은 진짜 html이 아니라 Babel에 의해 컴파일 되는 JSX다. 이들은 재료가 되어 Virtual DOM 이라는 새로운 DOM을 만드는데 쓰인다. 그리고 현재 브라우저에 보여지고 있는 진짜 DOM과 비교하여 어떤 부분이 달라졌는지 찾아낸다. 그리고 바뀐 부분만 진짜 DOM에 적용한다. 브라우저는 이 DOM을 해석하여 유저에게 새로운 화면을 보여준다.
  • JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요?
    • 복잡한 상태관리를 하지않고 기능개발에만 집중할 수 있게 하기 위해 나왔다.
    • JSX는 Declarative한 개발을 도와주는 도구다. 즉, 한눈에 이해하기 쉬운 개발을 만든다. 형태가 마치 HTML과 같기 때문에 유저에게 보여주고 싶은 최종적인 View와 같다. 개발자는 JSX를 통해 결과물에 직관적으로 도달할 수 있고, 이는 예측 가능한 개발을 만들어줄 뿐 아니라 유지보수, 협업 등에서 강점을 발휘한다.
  • JSX를 사용하지 않고 React를 사용할 수도 있나요? (advanced)
    • React를 사용할 때 JSX는 필수가 아니다.
      각 JSX 엘리먼트는 React.createElement(component, props, ...children) 를 호출하기 위한 문법 설탕이다.
// JSX로 작성
class Hello extends React.Component {
	render() {
    	return <div>Hello {this.props.toWhat}</div>;
    }
}

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

// JSX 사용 X
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에 JavaScript 표현식을 쓰려면 어떤 방법으로 써야 하나요?
    • 중괄호({})를 이용한다.
  • import / export 구문은 어떤 식으로 사용할 수 있나요?
//app.js
import { add } from './math.js';
console.log(add(10, 20)); // 30
// math.js
export function add (a, b) {
	return a + b;
}
profile
Judo
즐거운 코딩
이전 포스트

chunk, buffer, stream

다음 포스트

ES6

0개의 댓글