React Overview

📚 패트스캠퍼스 데브캠프 프론트엔드 8주차 학습 내용을 정리한 내용입니다.
📚 잘못된 정보는 댓글로 알려주시면 정말 감사합니다!

html, css, javascript 수업이 끝나고 드디어 김민태 강사님의 리액트 수업이 시작되었습니다!

본격적인 수업이 시작되기 전 학습하는 내용의 거의 대부분이 리액트에만 속하는 것이 아닌, 다른 어떤 프레임워크나 라이브러리를 사용하던 공통적인 부분이라는 것을 알고 시작하자라는 조언을 해주셨습니다.

---

리액트가 나오게 된 배경

😞 "JavaScript로 DOM을 다루며 UI를 수정하는 것은 힘들었어요.."

특정 이벤트가 발생 했을 때, DOM을 업데이트 해야하는 경우 다음과 같이 두가지 방법을 사용할 수 있고, 각 방식의 장점과 단점을 정리하면 다음과 같습니다.

createElement

• 장점 : 특정 DOM 요소를 선택해 수정할 수 있어 필요한 부분만 업데이트가 가능하다.
• 단점 : 다양한 속성을 추가하게 되면서 코드가 길어질 수 있다.

innerHTML

• 장점 : HTML 문자열을 사용하여 DOM을 쉽게 업데이트할 수 있다.
• 단점 : 특정 DOM 요소를 선택하고 수정하기 어려워, 불필요한 렌더링이 발생할 수 있다.

이때 두가지 방식 모두 복잡한 구조를 나타낼 때는 다루기 힘들 수 있다는 단점이 있고 이러한 불편함을 개선하고자 다음 두가지 개념이 등장했습니다.

step1. DOM 정보를 객체로 관리하자는 개념이 등장 → Virtual DOM
step2. 변경이 발생했을 때, 새로운 객체 정보를 만들고 기존과 비교 후 차이점만 Real DOM에 업데이트한다. → (CRUD에서 Create만 신경쓰자)

---

JSX

JSX로 마크업 작성하기

JSX는 기존의 HTML 마크업 방식과 유사하게 사용할 수 있도록 만들어주는 라이브러리입니다.

문법은 HTML과 거의 동일하지만 항상 함수로 감싸줘야하고, JSX 마크업을 return 하도록 만들어야한다는 점에서 차이가 있습니다.

→ 이걸 가지고 어떻게 dom을 구성할 수 있는가?

• 한방향으로 흘러간다는 개념을 이용
• 콜백 함수가 끝나야 내 작업을 return 할 수 있다
  (→ 콜백 함수의 결과를 함께 묶어서 내가 최종적으로 return 한다!)

리액트는 함수를 하나의 UI 단위로 생각합니다. 여기서 당연히 하나의 함수가 어떤 UI들을 커버하는 지는 개발자의 몫이 됩니다. (함수 하나에 얼마나 많은 UI를 구성하느냐는 개발자의 선택사항)

예를 들어 나는 Page 단위로 컴포넌트를 구성할거야 vs 나는 페이지를 구성하는 요소들을 각각 컴포넌트로 관리할거야(Title, Form, Item...) 처럼 개발자의 선택에 따라 UI 조각의 구성은 달라질 수 있다는 말!

다만, 함수를 호출 구문으로 사용하게되면 UI의 모양(구성)이 잘 안보일 수 있다는 문제가 있습니다.

이에 JSX를 리턴하는 함수는 자바스크립트 함수 호출방법이아니라, HTML 형식으로 태깅할 수 있는 형태를 가지고있습니다. 이때 함수명은 반드시 대문자로 시작해야 하며, JSX UI 정보를 리턴하는 함수를 컴포넌트라고 부릅니다.

function MyButton() {
	return (
		<button>버튼</button>
	)
}

// MyButton 컴포넌트 사용하기
export default function MyApp() {
	return (
		<div>
			<h1>어서오세요</h1>
			<MyButton />
			MyButton() // 이렇게 사용할 수 없다!
		</div>
	)
}

추가로 class 속성 사용시에는 className="" 형태로 사용해야하고, 싱글태그 또한 <br /> 처럼 좀 더 엄격한 문법을 적용된다는 특징이 있습니다!