개념정리
DOM
→ 원본 HTML 문서의 객체 기반 표현 방식
→ 페이지의 콘텐츠 및 구조, 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용
→ 원본 HTML 문서 형태와 비슷하지만 차이점 존재
- 항상 유효한 HTML 형식
- 자바스크립트에 수정될 수 있는 동적 모델
- 가상 요소 포함 X
- 보이지 않는 요소 포함
DOM의 개체 구조는 "노드 트리"로 표현
→ 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무같은 구조
ex)
<html lang="en">
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p> <!--I'm fine thank you and you! -->
</body>
</html>
출처 : https://wit.nts-corp.com/2019/02/14/5522
DOM은 정확히 무엇일까? | WIT블로그
최근 잘못 이해하고 있었던 DOM에 대해 정확한 개념을 정리해 보고자 What, exactly, is the DOM? 문서를 번역해 보았습니다.
wit.nts-corp.com
1. 리액트는 어쩌다 만들어졌을까?
DOM을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉬움
→ 그래서 Ember, Backbone, AngularJS 등의 프레임워크가 만들어짐
자바스크립트의 특정 값이 바뀜 → 특정 DOM의 속성이 바뀌도록 연결을 해줌 → 업데이트 작업 간소화
리액트는? → 어떤 상태가 바뀌었을 때, 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙 정하기 X 걍 날려버림! 모든 걸 새로!
→ 하지만 날려버리고 새로 만들면 속도가 느릴텐데?
→ Virtual DOM
가상의 DOM.
걍 JavaScript 객체 → 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 빠름
리액트
상태 업데이트 → 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링
→ 리액트 개발팀이 만든 비교 알고리즘을 통해 실제 DOM과 비교
→차이가 있는 곳 감지 → 실제 DOM에 패치
렌더링 : HTML, CSS, 자바 스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정
( 웹사이트 코드 -> 대화형 페이지(웹사이트 방문 할 때 보는 거))
2. 작업환경 준비
설치
- Node.js
- Yarn
- 코드 에디터(VSCode)
- Git bash
새 프로젝트 만들어보기
터미널을 열고 다음 명령어 실행( 윈도우 사용자는 Git Bash 사용 )
begin-react 라는 디렉터리가 생김
이 안에 리액트 프로젝트가 생성됨
3. 나의 첫번째 리액트 컴포넌트
src 디렉터리에 Hello.js 파일 작성
리액트 컴포넌트
→ 함수형태, 클래스형태로 작성 가능
JSX → 리액트 컴포넌트에서 XML 형식의 값 반환
방금 만든 Hello 컴포넌트를 App.js 에 불러와서 사용
App.js 파일에 들어가 수정하고 save를 하면 자동으로 컴파일 시작 → 페이지 자동으로 reload
컴포넌트
→ 일종의 UI 조각
→ 쉽게 재사용
Index.js
id가 root인 DOM 을 선택하고 있음
→ 리액트 컴포넌트가 렌더링 될 때, 렌더링된 결과물이 위 div 내부에 렌더링 됨
4. JSX의 기본규칙
JSX
→ 리액트의 생김새를 정의할 때 사용하는 문법
→ HTML같이 생겼지만 JavaScript
리액트 컴포넌트 파일에서 XML 형태로 코드 작성 → babel이 JSX를 JavaScript 로 변환
Babel → 자바스크립트의 문법을 확장해주는 도구
JSX가 JavaScript로 변환되기 위한 규칙
- 꼭 닫혀야 하는 태그
- 두 개 이상의 태그는 무조건 하나의 태그로 감싸져있어야함
- JSX 안에 자바스크립트 값 사용
5. props를 통해 컴포넌트에 값 전달하기
props
→ 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용 (컴포넌트 : 재사용 가능한 각각의 독립된 모듈)
ex)
App컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달
컴포넌트에게 전달되는 props는 파라미터를 통하여 조회 가능
props 는 객체 형태로 전달 (name 값을 조회하고 싶다면 props.name을 조회)
defaultProps
→ 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용할 값 설정하고 싶다면 defaultProps 값 설정
props.children
→ 컴포넌트 태그 사이에 넣은 값 조회
6. 조건부 렌더링
→ 특정 조건에 따라 다른 결과물을 렌더링
props 이름만 작성, 값 설정 생략 → true로 설정한 것으로 간주
7.useState
동적인 값 : state
useState 함수
→ 컴포넌트에서 상태를 관리
const [number, setNumber] = useState(0);
8. input 상태 관리
input
→ 사용자가 입력 할 수 있는 태그
useState를 사용해 관리
input의 onChange 이벤트 사용
이벤트에 등록하는 함수에서 이벤트 객체 e를 파라미터로 받아와서 사용 가능
→ 이 객체의 e.target : 이벤트가 발생한 DOM인 inputDOM 가르킴
→ e.target.value(이 DOM의 value 값)조회 → 현재 input에 입력한 값 알 기 가능
→ 이 값을 useState를 통해 관리 해주면 됨
으아악
input태그의 value 값 설정해야지 상태 바뀌었을 때 input의 내용도 업데이트 됨
9. 여러개의 input 상태 관리
useState 여러 번 사용하고 onChange 여러개 만들어서 구현 가능 but 더 좋은 방법
→ input에 name을 설정 → 이벤트 발생 시 이 값 참조
기억해야하는거
→ 리액트에서 객체를 업데이트하게 될 때에는 기존객체 직접 수정x, 새로운 객체를 만들어서 변화를 줘야됨
10. 특정 DOM 선택
→ ref
→ useRef (함수형 컴포넌트)
→ React.createRef (클래스 컴포넌트)
useRef()를 사용 → Ref 객체 생성, 이 객체를 선택하고 싶은 DOM에 ref 값으로 설정
→ Ref 객체의 .current 값은 원하는 DOM을 가르킴
11. 배열 렌더링
(1) 그대로 코드 작성 → 비효율!
(2) map()
→ 자바스크립트 배열의 내장 함수
→ 배열 안의 각 원소를 변환 , 새로운 배열 생성
리액트에서 배열을 렌더링 할 때는 key라는 props를 설정해야됨
key값은 고유값으로 설정 (배열안에 중복되는 key가 있을 때 오류메세지, 업데이트 제대로 x)
12. 컴포넌트 안의 변수 만들기
useRef → 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리
- setTimeout, setInterval 을 통해서 만들어진 id
- 외부 라이브러리를 사용하여 생성된 인스턴스
- scroll 위치
useRef() 사용 시 파라미터 넣기 → 이 값이 .current 값의 기본값이 됨
이 값을 수정하거나 조회하고 싶을 때 .current 값 수정하거나 조회하면 됨
13. 배열에 항목 추가
배열에 변화를 줄 때, 불변성 지켜야함 → push, splice, sort 등의 함수 x
(1) spread 연산자 사용
(2) concat 함수 사용 (기존의 배열 수정 x, 새로운 원소가 추가된 새로운 배열을 만듬)
14. 배열에 항목 제거
→ onRemove 함수 : id 가 __인 객체를 삭제
→ 불변성 지켜가며 업데이트 filter 배열 내장 함수 사용
filter 배열 내장 함수
→ 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열 만듬
const onRemove = id => {
setUsers(users.filter(user => user.id !== id));
};
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} />
</>
);
}
export default App;
15. 배열 항목 수정
→ onToggle : UI의 요소의 상태 관리
'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글
| [2024-2 React.js 스터디] 윤아영 #2주차 (0) | 2024.10.30 |
|---|---|
| [2024-2 React.js 스터디] 김지수 #2주차 (0) | 2024.10.30 |
| [2024-2 React.js 스터디] 윤아영 #1주차 (1) | 2024.10.09 |
| [2024-2 React.js 스터디] 김지수 #1주차 (5) | 2024.10.08 |
| [2024 여름방학 React.js 스터디] 이종윤 #6주차 (0) | 2024.08.19 |
