React

📔Framework와 Library

프레임워크와 라이브러리는 복잡한 개발을 효율적으로 하기 위해 다른 개발자들이 만들어둔 코드라는 공통점이 있다.

차이점은, 프레임워크는 만들어둔 코드의 정해진 틀(frame)속에서만 수동적으로 작업(work)해야 하지만 라이브러리는 개발자가 작업을 진행할 때 필요한 기능을 찾고(library) 능동적으로 가져와서 사용할 수 있다는 것이다.

개발을 요리에 비유하면, 프레임워크는 모든 도구가 갖춰진 주방이다. 다른 사람이 이미 마련해놓은 주방에 들어가 제공되는 도구만을 사용해야 하며 다른 도구는 사용할 수 없다.
반면에 라이브러리는 다른 사람이 만들어 놓은 도구 각각을 의미한다. 라이브러리를 사용하게 된다면, 내가 요리하는 주방에서 필요한 도구들을 목적과 용도에 따라서 입맛에 맞게 가져다 쓸 수 있다.

즉, 프레임워크는 전체적인 흐름을 이미 자체적으로 가지고 있어 개발자가 그 흐름에 맞게 코드를 작성해야 하고, 라이브러리는 개발자가 흐름을 가지고 원하는 라이브러리를 가져다 사용할 수 있다.

이러한 프레임워크와 라이브러리 중 프론트엔드에서 가장 많이 쓰이는 세 가지가 Angular, Vue, React이다.
앵귤러와 뷰는 프레임워크이며, 리액트는 라이브러리지만 프레임워크 적인 특징을 일부 가지고 있다.

📔React를 사용하는 이유

리액트는 자기만의 문법을 가진 앵귤러나 뷰와는 다르게 대부분 자바스크립트의 문법을 그대로 활용한다.
또한 페이스북의 지속적인 관리와 함께 생태계가 활성화되어 있어, 사용자가 많고 커뮤니티가 발달해 있다.
그렇기 때문에, 리액트를 활용하면서 발생하는 문제에 대한 해결방안을 쉽게 찾아볼 수 있고, 이는 곧 개발자의 생산성을 향상하는 결과를 가져온다.

이러한 이유들로 리액트는 현재 가장 많이 사용되고 있다.

📔React란 ?

React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리 이다.
리액트를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점이다.
이로 인해 데이터 기반의 선언적 개발이 가능해지며, 자동으로 UI를 업데이트하는 과정에서 Virtual DOM(가상 돔)을 통해 최적화된 업데이트를 할 수 있다.
또한 Component(컴포넌트) 기반의 개발을 통해 복잡한 UI를 효과적으로 구성할 수 있으며 JSX문법으로 컴포넌트를 편리하게 작성할 수 있다.

📔React의 특징

🖍선언적

개발방식에는 절차적 / 선억적 개발이 있다.
절차적 프로그래밍은 문제를 어떻게 해결할 것인가 에 중점을 두는 방식이고, 선언적 프로그래밍은 무엇을 해결할 것인가에 중점을 두는 방식이다.

쉽게 설명하면,

절차적 : 이 방향으로 직진해서 두 번째 블록에서 우회전해주시고, 이후 첫 번째 신호등에서 좌회전해주세요. 전방에 다리를 건널 때까지 직진해주시고, 소방서가 있는 블록에서 우회전 후 300m 앞에서 내려주세요.
선언적 : OOO으로 가주세요.

위를 보면 절차적은 목적지에 어떻게 도달하는지에 초점이 맞춰져 있고, 선언적은 목적지에 초점이 맞춰져 있다.
바닐라 자바스크립트는 절차적 프로그래밍 방식이고, 리액트가 선언적 프로그래밍 방식이다.

선언적인 방식으로 개발을 하게 되면, 개발 과정에서도 최종 결과물의 모습만 고려하면 되기 때문에 훨씬 편리하고 효율적으로 개발할 수 있으며, 이는 기존에 DOM을 절차적으로 조작하는 개발 방식의 패러다임을 완전히 바꾼 새로운 패러다임으로의 전환이다.

🖍 Virtual DOM

Virtual DOM은 리액트의 가장 큰 기능이라고 할 수 있다.
리액트에서 UI를 업데이트하고자 할 때, 선언적 특징에서 언급한 것처럼 중간과정을 처리하기 위해 DOM 요소에 변화를 주기 전, 내부적으로 가상 DOM을 이용해서 실제 DOM에 일어나야 하는 변화를 계산한다.
그런데 왜 중간과정이 번거롭게 추가가 되었을까 ???

우선 화면은 DOM 요소에 변화가 생기면 웹 브라우저는 다시 렌더 트리(DOM트리 + CSSOM트리), 레이아웃 위치를 계산하고, 화면에 그리는 작업을 수행한다.
그런데 요즘의 웹 페이지들은 상호작용이 많은 만큼 DOM 조작이 많이 발생하게 된다.
이때 DOM을 조작할 때마다 위와 같은 작업을 반복 수행하면, 성능이 저하되고, 전체적인 프로세스를 비효율적으로 만든다.

이런 문제를 해결하기 위해서, 이전 UI 상태를 메모리에 유지하는 가상 DOM을 통해 변경될 UI의 최소 집합을 계산하여 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.
view에 변화가 있다면 그 변화가 실제 DOM에 적용되기 전에 가상 DOM에 먼저 적용해보고, 그 최종적인 결과를 실제 DOM에 전달하는 것이다.
이로써, 웹 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능 저하를 개선할 수 있다.

🖍 Component

🔍 컴포넌트의 정의

컴포넌트란 재활용 가능한 UI 구성 단위를 의미한다.
쉽게 말해 각 컴포넌트는 레고 블럭이고, 여러 레고 블럭을 조립해 새로운 레고 블럭을 만들거나 동일한 레고 블럭을 여러 번 사용해 조립할 수 있다.

🔍 컴포넌트의 특징

1. 필요한 곳에서 재사용할 수 있다.
   함수도 기능이 독집적이고 한번 선언해두면 필요할 때마다 호출하면서 재사용할 수 있듯이, 컴포넌트도 함수처럼 필요한 곳에 가져와서 사용할 수 있다.

2. 독립적으로 사용할 수 있기 때문에 코드 유지보수에 좋다.
   컴포넌트를 사용하지 않았을 경우, 공통적인 스타일 등을 바꿀 때 일일이 모든 항목을 찾아서 수정해야 하는 번거로움이 있지만,
   컴포넌트를 사용하면 그 컴포넌트만 수정하면 된다.

3. 또 다른 컴포넌트를 포함할 수 있다.
   컴포넌트는 <부모 컴포넌트 /> 안에 <자식 컴포넌트 />들을 생성하여 사용할 수 있다.

4. 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다.
   한 페이지 컴포넌트를 적절한 컴포넌트로 분리하여 구성한다면, 해당 컴포넌트의 구조를 파악하기 용이하다.

🔍 컴포넌트의 종류

1. 클래스 컴포넌트

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>This is Class Component!</h1>;
  }
}

export default App;

클래스 컴포넌트에서는 render() 메서드가 있어야 하고, 그 안에서 화면에 보여줄 JSX를 반환한다. state 및 lifecycle API를 통해 관련 기능이 사용 가능하다.

2. 함수 컴포넌트

import React from 'react';

const App = () => {
  return <h1>This is Function Component!</h1>;
};

export default App;

함수 컴포넌트는 render() 메서드 없이 JSX를 반환하는 방식으로, 클래스 컴포넌트에 비해서 간단하지만 state와 lifecycle을 관리하지 못한다는 단점이 있다.
하지만 Hook 기능이 추가되면서 함수 컴포넌트에서도 state를 사용할 수 있게 되었고, 그 후로 함수 컴포넌트가 더 많이 쓰이고 있다.

🔍 컴포넌트의 사용

리액트는 소문자로 시작하는 요소를 HTML 태그로 인식하기 때문에 컴포넌트 명은 항상 대문자로 시작해야한다.

🖍JSX

🔍 JSX의 정의

JSX(JavaScript Syntax eXtension)란 리액트에서 사용하는 자바스크립트 확장 문법이다.
JSX는 HTML과 JS 로직을 하나의 JS파일 안에서 모두 처리하기 위해 확장한 문법이다.
JSX로 작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일바 자바스크립트 코드 형태로 변환된다.

🔍 JSX의 특징

JSX는 HTML 태그와 유사한 형태로 사용하기 때문에보기 쉽고 익숙하다. 또한 하나의 자바스크립트 파일에서 HTML 마크업과 자바스크립트 로직을 도시에 작성할 수 있기 때문에 편리하다.

🔍 JSX 문법

1. JSX element
   JSX 문법을 통해 JS 파일 어디에서나 필요한 곳에 HTML처럼 작성할 수 있다.
   변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

const hi = <p>Hi</p>;

2. Javascript 표현식
   JSX 내부에서 자바스크립트 값을 출력하고 싶다면, {} 안에 자바스크립트 표현식을 작성할 수 있다.

import React from 'react';

const Greetings = () => {
  const name = '박나정';

  return <h1>{name}님, Welcome to Wecode!</h1>;
};

export default Greetings;

3.JSX attribute
태그의 attribute name(속성명)은 camelCase로 작성해야 하고, class를 주고 싶을 때는 className을 사용해야 한다.

/* HTML
<h1 class="greetings">Welcome to Wecode!</h1>

/* JSX
<h1 className="greetings">Welcome to Wecode!</h1>

4. event 처리
   자바스크립트로 구현할 때에는 해당하는 DOM 요소에 직접 접근해 eventListener를 사용하여 이벤트를 처리해주었다.
   JSX에서는, 태그를 작성할 때 직접 이벤트와 이벤트 핸들러를 부여할 수 있다.

• 이벤트는 앞에 on을 붙혀 camelCase로 작성한다.
• 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

// JS
const title = document.getElementsByClassName("title")[0];
title.addEventListener("click", handleClick);

// JSX
<h1 className="title" onClick={handleClick}>
  Welcome to Wecode!
</h1>

5. inline Style
   style thrtjddms {{}} 중괄호를 두 번 겹쳐서 쓰는 형태로 사용한다.
   바깥의 {}는 JSX 문법을 의미하고, 안쪽의 {}는 자바스크립트 객체를 의미한다.

// HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

// JSX
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>

inline 스타일은 css보다 성능이 낮고 우선순위가 높ㄹ기 때문에, 동적으로 계산하여 스타일링을 하는 경우 이외에는 사용을 지양하는 것이 좋다.

6. Self-Closing Tag
   img 태그와 같이 하나의 태그가 요소인 경우, img /> 처럼 항상 /로 끝내줘야 한다.

7. Nested JSX
   반드시 최상위를 감싸고 있는 태그가 있어야 한다.

const Greetings = () => {
  return (
    <div>
      <h1>나정님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </div>
  );
}

JSX를 하나의 태그로 감싸야 하는 이유는, Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 한 컴포넌트는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

8. React.Fragment
   최상위에 태그를 감싸야할 때 유용하게 사용하는 것이 <React.Fragment>이다.
   Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소를 간단하게 그룹화할 수 있는 기능이다.
   축약형은 <> </> 문법이 있다.