React 알아가기 (1)

삔아·2023년 4월 21일

React 알아가기 (Feat. Udemy)

목록 보기

1/11

해당 내용은 https://www.udemy.com/course/best-react/ 강의를 들으며 정리하고 스스로 공부 한 내용을 기록 하였습니다.

리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리

좀 더 간단히 사용자 인터페이스를 구축 할 수 있도록 도와준다. 작업을 좀 더 단순하게 하기 위해 리액트는 컴포넌트 라는 개념을 도입 했다.

모든 사용자 인터페이스들은 전부 컴포넌트로 구성된다.
그럼 어떤 것이 컴포넌트가 되는가? 바로 사용자 인터페이스에서 재사용 할 수 있는 빌딩 블록이 컴포넌트가 된다.

Don't repeat yourself!
재사용 가능한 빌딩 블록은 반복을 피할 수 있게 해주는데 프로그래밍에서 반복하지 않는 것은 아주 좋은 일이다.

Don't do too many things in one and the some place (function)
우려사항들은 분리하는 것은 코드베이스를 작고 관리 가능한 단위로 유지 할 수 있게 하는 것 이다.

각각의 컴포넌트에는 하나의 명확한 과제와 초점에 대해서만 집중 가능하며 그 코드를 여러 파일로 분할하고 유지 관리 하기 쉬운 작은 단위의 코드를 가지는 점에 관심을 가지자.

모든 컴포넌트에서 HTML, CSS, Javascript를 결합하고 전체 사용자 인터페이스를 구축하기 위해 해당 컴포넌트들을 결합한다.

대부분 리액트의 컴포넌트들은 HTML, Javascript를 결합한다.
리액트에서는 컴포넌트와 이 컴포넌트들을 잘 결합해서 구축하는것이 중요하다.

React allows you to creat re-usable and reactive components consisting of HTML and JavaScript (and CSS) ⇒ Declarative Approach

리액트는 선언전 접근 방식을 이용한다.

⇒ Define the desired target state(s) and let React figure out the actual Javascript DOM instructions

리액트로 작업할때는 항상 최종 상태, 즉 목표상태 또는 다양한 상황에 따라 다른 목표상태를 정의하는 것이 가장 중요하다.

리액트가 하는 일은 실제 웹페이지에서 어떤 요소가 추가되거나, 삭제되고, 업데이트가 되어야 하는건지 해결하는 것이다.

최종 상태와 어떤 상황에서 어떤 상태가 사용되어야 하는지 정의 되어야 한다.
자신만의 HTML요소를 만들고 결합해서 사용자 인터페이스를 구축할 수 있다.

function App() {
	return (
		<div>
			<h2> Let's get started! </h2>
		</div>
	);
}

→ JSX는 자바스크립트 XML을 의미.
결국 HTML은 XML이라 할 수 있기 때문.

컴포넌트를 만들고 결합해서 사용자 인터페이스를 구축하는 리액트의 가장 중요한 개념

JSX의 개념
- 과거에는 ‘React’ 를 직접 import 하여 사용하였다.
  현재 처럼 ‘return { }’ 구문이 아닌, ‘return React.createElement();’ 를 이용
  1) 첫번째 인자는 생성해야 하는 요소 - 예를 들면 div 같은 것
  2) 두번째 인자는 이런 요소를 설정하는 객체 - 이 요소의 모든 속성을 설정하는 객체. 빈 객체 전달 가능
  3) 세번째 인자는 div태그 사이에 있는 컨텐츠를 의미. 다양한 컨텐츠 조각의 무한대를 가질 수 있음. → React.createElement를 또다시 작성…
- 예를 들어,
```
return React.createElement(
	'div',
	{},
	React.createElement('h2', {}, 'Let's get Started!'),
	React.createElement(Expenses, {items: expenses})
);
```
- JSX 대안으로도 작성할 수 있으나 가독성이 좋지가 않다.
- 최신의 프로젝트 셋업에서는 react를 추가적으로 임포트 하지 않아도 됨. 내부에서 사용하고 있기 때문이다.
파일을 어떻게 정리하고
- 일하기 편한 방식으로 정리
함수를 어떻게 작성하는지
선언형?
명령형: 어떻게 (How) / 선언형: 무엇을 (What)
어떤 것을 중요시 하는지에 대해서 생각해보면 된다. 즉, 선언형 프로그래밍은 프로그램의 제어의 흐름 보다는 원하는 목적을 중요시 여긴다.

Frontend 개발자 입니다, 피드백은 언제나 환영 입니다