[React.js] what is React

카테고리 : Development
태그: development · reactjs · node.js · yarn · npm · vscode
등록일: 2022년 08월 28일
최근 업데이트: 2023년 03월 29일

---

• 1. 선언형
• 2. 컴포넌트 기반
• 4. 컴포넌트
• 5. 리액트에서 이벤트 처리하기
• 6. React에서 데이터의 흐름과 State 끌어올리기
• 7. 조건부 렌더링
• 8. 리스트와 Key
• 9. 리액트로 생각하기

리액트 공식 문서에 홈페이지에 가면 가자마자 리액트는 선언형, 컴포넌트 기반이라는 키워드를 발견할 수 있다.

리액트의 특징을 아주 잘 나타내는 말인 거 같다.

1. 선언형

js만으로 UI를 만들고 브라우저에 나타내려면 우리는 아래와 같이 DOM API를 통해 필요한 HTML element를 만든다.

document.createElement('div')

리액트는 이러한 방식 대신 JSX라는 문법을 사용하여 태그를 직접 나타낼 수 있다.

즉 리액트를 사용하면 코드를 보고 화면에 어떤 UI가 그려질지 충분히 예상 가능하다는 것이다.

이것이 바로 ‘선언적’이다.

---

2. 컴포넌트 기반

1) Component 리액트에서는 모든 것이 컴포넌트이고 컴포넌트로 이루어져 있다.

리액트의 JSX 문법을 통해 컴포넌트를 만들고 작은 컴포넌트가 다른 어떤 컴포넌트의 부분이 되기도 한다.

이러한 컴포넌트 단위의 개발의 장점은 ‘재사용성’에 있다.

또한 유지보수에도 용이하다.

바로 이러한 것이 컴포넌트 단위 개발의 장점이다.

2) JSX

JSX란 리액트 라이브러리에서만 사용되는 커스텀한 문법이다.

간단하게는 자바스크립트 문법 + HTML 문법의 조합이다.

주의할 점은 모든 JSX 문법 내에서 모든 자바스크립트 문법은 중괄호 {} 안에서만 사용할 수 있다.

따라서 리액트를 잘 사용하려면 우선은 JSX 문법에 익숙해져야한다.

이러한 JSX 문법의 특징은 ‘선언적’이기 때문이다.

---

3) 엘리먼트

Element는 리액트의 가장 작은 단위.

즉 여러 엘리먼트가 모여 하나의 컴포넌트를 구성.

또한 리액트 엘리먼트는 불변 객체다. 한 번 엘리먼트를 생성하고 나면 이후에는 엘리먼트의 자식이나 속성을 변경할 수 없다.

이러한 엘리먼트를 DOM 노드에 렌더링 하려면 ReactDOM.render() 메서드를 통해 할 수 있다.

---

4. 컴포넌트

1) 함수형 컴포넌트

리액트 = 컴포넌트라고 생각해도 될 만큼 리액트는 컴포넌트가 가장 중요함.

리액트의 모든 것은 컴포넌트로 이루어져 있다.

함수형 컴포넌트는 props라고 하는 객체를 받아 해당 데이터를 리액트 엘리먼트에 마음대로 쓸 수 있다.

리액트는 사용자 정의 컴포넌트로 작성된 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다.

그 객체가 props이다.

컴포넌트는 항상 대문자로 시작 기본적으로 함수라는 것 자체는 한 가지 기능만 하는 것이 좋다.

마찬가지로 함수형 컴포넌트도 재사용성을 고려해 분리시키는 것이 좋다.

가장 중요한 것은 props는 읽기 전용이라는 것이다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.

근데 분명 데이터를 수정해야 하는 일이 생길 것이다.

이것을 다음 클래스 컴포넌트의 state라는 속성을 통해 자유자재로 출력 값을 변경할 수 있다.

간단하게 정리하면 리액트에서는 무언가 변동 가능성이 있는 데이터는 state로 따로 관리를 하며

props를 통해 받아온 데이터를 컴포넌트 내에서 사용할 수 있다.

---

2) 클래스 컴포넌트의 state와 생명주기

클래스 컴포넌트는 React.Component를 상속하도록 extends 키워드를 통해 만들어낼 수 있다.

클래스 컴포넌트에서 render 메서드를 정의하면 리액트는 state의 변화가 생길 때마다 render 메서드를 호출한다.

클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 한다.

스테이트는 직접 수정할 수 없다.

그리고 직접 수정해서도 안된다 직접 수정하면 리액트가 컴포넌트를 다시 렌더링 하지 않는다

그 대신에 setState 메서드를 사용해서 수정

원하는 로직대로 실행이 안 될 수도 있다.

---

5. 리액트에서 이벤트 처리하기

리액트 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다.

• 리액트의 이벤트는 소문자 대신 캐멀 케이스를 사용한다.

• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

• 리액트에선 기본 동작을 방지하기 위해서는 반드시 preventDefault를 명시적으로 호출해야 한다.

• 반드시 this 바인딩

---

6. React에서 데이터의 흐름과 State 끌어올리기

!리액트에서 데이터의 흐름은 단방향이다.

즉 하위 컴포넌트에서 받은 props는 몇 번째 부모에서 내려온 건지 인지하지 못함

state 끌어올리기란 하위 컴포넌트에서의 어떤 이벤트나 무언가의 동작으로 state를 변화시키려는 경우다.

하위 컴포넌트의 props를 통해 부모에서 작성한 함수를 전달하고 해당 함수를 하위 컴포넌트에서 실행시켜 state를 변화시킬 수 있다.

또한 간단한 앱의 경우 하향식으로 앱을 만들 수도 있지만 대규모 앱은 규모가 커서 작은 단위(컴포넌트)부터 만들고 점점 더 규모를 키우는 상향식으로 앱을 만든다.

---

7. 조건부 렌더링

기존의 if else 구문, 삼항 조건부 연산자 등을 통해 조건에 따라 원하는 컴포넌트나 엘리먼트를 렌더 할 수 있다

---

8. 리스트와 Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다.

대부분의 경우 데이터의 ID를 key로 사용한다.

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다.

그러나 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않는다.

이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있기 때문이다.

---

9. 리액트로 생각하기

1. 컴포넌트화 시작. 해당 컴포넌트는 하나의 일만을 담당하는 것이 좋다.

2. 컴포넌트로 나누었다면 데이터를 가지고 실제 렌더링 실행. (state는 적용 x, props 만을 이용)

3. 정적인 앱을 만들었다면 이제 어떤 데이터가 state가 되어야 하는지 생각해야함.

4. state가 되어야 하는 데이터를 찾았다면 이제는 state가 어떤 컴포넌트에 위치해야 하는지가 중요.

같은 스테이트를 props으로 받아 사용하는 모든 컴포넌트의 공통의 부모 컴포넌트에 state가 위치해야함

1. 이벤트에 따라 적용할 메서드를 만들고 state 끌어올리기를 통해 하위 컴포넌트에 해당 메서드를 props로 넘겨줌