[FE 45] _23.05.18 _ Day 27 (React)

---

오늘은 리액트 첫번째날!!

---

리액트는 뭐야?? _Chat GPT에게 물어보기

 

리액트(React)는 페이스북에서 개발된 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 

 

리액트는 가상 DOM(Virtual DOM)을 사용하여 효율적인 UI 업데이트를 가능하게 하고, 컴포넌트 기반 아키텍처를 통해 재사용성과 모듈화를 강조합니다.

리액트의 주요 특징과 개념은 다음과 같습니다:

1. 컴포넌트 기반 아키텍처:
   - 리액트는 UI를 독립적인 컴포넌트로 분리하고, 이를 조합하여 복잡한 UI를 구축하는 방식을 채택합니다.
   - 각 컴포넌트는 재사용 가능하며, 독립적으로 상태(state)와 속성(props)을 가질 수 있습니다.

2. JSX (JavaScript XML):
   - JSX는 자바스크립트의 확장 문법으로, HTML과 유사한 구조를 가지며 자바스크립트 코드를 삽입할 수 있습니다.
   - JSX를 사용하여 컴포넌트의 UI를 선언적으로 작성할 수 있습니다.

3. 가상 DOM(Virtual DOM):
   - 가상 DOM은 리액트의 핵심 개념으로, 실제 DOM에 대한 추상화 계층입니다.
   - 가상 DOM은 실제 DOM과 동기화되며, 변경된 부분만 업데이트하여 효율적인 렌더링을 수행합니다.

4. 단방향 데이터 흐름:
   - 리액트는 단방향 데이터 흐름을 지향합니다. 

      부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있으며, 자식 컴포넌트는 상태 변경 요청을 부모 컴포넌트에게 전달합니다.

5. 상태 관리:
   - 리액트에서는 컴포넌트의 상태를 관리할 수 있습니다. 

      상태는 컴포넌트 내에서 변경 가능하며, 변경될 때마다 리액트는 필요한 부분만 업데이트하여 렌더링합니다.

   - 상태 관리를 위해 클래스 컴포넌트에서는 내부 상태(state)를 사용하고, 함수 컴포넌트에서는 React Hook을 사용합니다.

리액트는 단독으로 사용될 수도 있지만, 주로 리액트 생태계의 다른 라이브러리와 함께 사용되어 개발 생산성을 향상시킵니다.

 

---

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

---

JSX (JavaScript XML):

 

JSX는 자바스크립트의 확장 문법으로, XML과 유사한 구조를 가지며 자바스크립트 코드를 삽입할 수 있는 문법입니다. JSX는 리액트에서 UI를 선언적으로 작성하기 위해 사용됩니다.

 

JSX의 주요 특징

1) 선언적인 UI 작성: JSX를 사용하여 UI를 선언적으로 작성할 수 있습니다.

                                HTML과 비슷한 구조를 가지며, 컴포넌트의 구조와 모양을 직관적으로 표현할 수 있습니다.

const element = <h1>Hello, World!</h1>;

 

 

2) 자바스크립트 표현식 삽입: JSX 내부에서 중괄호({})를 사용하여 자바스크립트 표현식을 삽입할 수 있습니다.

                                             이를 통해 동적인 값을 표현하거나 자바스크립트 코드를 실행할 수 있습니다.

const name = "John";
const element = <h1>Hello, {name}!</h1>;

 

 

3) 컴포넌트 조합: JSX는 컴포넌트를 조합하여 복잡한 UI를 구성하는 데 사용됩니다.

                           컴포넌트는 JSX 태그로 표현되며, 재사용 가능한 UI 조각으로 캡슐화될 수 있습니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Greeting name="John" />;

 

4) 속성(props) 전달: JSX 태그의 속성에 값을 전달할 수 있습니다. 속성은 컴포넌트의 함수 매개변수로 전달되어 사용될 수 있습니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Greeting name="John" />;

JSX는 리액트 컴포넌트의 UI 작성을 간결하고 가독성이 높게 만들어줍니다.

자바스크립트의 힘과 유연성을 유지하면서, HTML과 유사한 구문을 사용하여 UI를 표현할 수 있습니다.

컴파일러나 바벨(Babel)과 같은 도구를 사용하여 JSX 코드를 일반 자바스크립트로 변환하여 실행할 수 있습니다.

---

Fetch API 과제 레퍼런스의 의사코드

 

1. url 변수에 가져올 데이터의 URL을 설정합니다.
2. fetch 함수를 호출하여 데이터를 가져옵니다. 이 함수는 Promise를 반환합니다.
3. 첫 번째 .then 블록에서 서버 응답을 확인합니다. response.ok 속성을 사용하여 응답이 성공적인지 확인합니다.
4. 응답이 성공적일 경우, response.json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 변환하여 반환합니다. 이 역시 Promise를 반환합니다.
5. 두 번째 .then 블록에서 데이터를 사용하여 원하는 작업을 수행합니다. 이 예제에서는 단순히 데이터를 콘솔에 출력합니다.
6. .catch 블록에서 에러를 처리합니다. 앞서 발생한 모든 에러는 이 블록에서 처리됩니다.

---