2주차

 

교재

https://product.kyobobook.co.kr/detail/S000212754474

Do it! 리액트로 웹앱 만들기 with 타입스크립트 | 전예홍 - 교보문고

기존 교재로 예정되어 있던 <Do it! 리액트 모던 웹 개발 with 타입스크립트>의 절판 이슈로 개정판 사용함

 

1장 : 리액트 개발 준비

1-1. 리액트 프레임워크 이해하기

• 리액트(React) : 오픈소스 자바스크립트 프레임워크. 가상 DOM과 JSX라는 방식으로 동작. 싱글 페이지 어플리케이션을 만드는 프론트엔드 자바스크립트 프레임워크
• 싱글 페이지 애플리케이션(SPA) : 주소 창으로 요청하는 자원이 하나.(index.html) 즉 웹서버에 자원을 한 번만 요청하여 작동하므로, 새로 자원을 수신받아 렌더링할 필요가 없어 화면 깜빡임 현상이 발생하지 않는 웹 애플리케이션

1-2 ~ 1-4. 개발 환경 관련

책에서 소개된 개발도구

Node.js(필수) / VSCode / scoop / touch / Chrome

이미 컴퓨터에 리액트 개발에 필요한 환경이 설치되어 있기에 스킵...

테일윈드CSS 관련 확장프로그램만 추가 설치함

• 테일윈드CSS : CSS 스타일링 코드를 좀 더 쉽게 작성할 수 있도록 해주는 프레임워크
• 헤드윈드 : 테일윈드CSS 관련 코드를 이해하기 쉬운 순서로 재배치해주는 확장프로그램
• 포스트CSS : @tailwind 규칙에 의한 불필요한 경고 메시지 삭제

1-5. 첫 번째 리액트 프로젝트 만들기

• npm(node package manager) : Node.js 프로젝트에서 개발에 유익한 다양한 오픈소스 라이브러리를 쉽게 설치해 사용할 수 있게 함
• npx : 패키지는 계속해서 업데이트되므로 최신 버전을 유지하기 번거로움. npx는 패키지들의 가장 최신 버전을 찾아내 npm i -g 명령으로 설치해주는 프로그램

리액트 프로젝트 만들기

npx create-react-app 프로젝트이름 --template typescript

 

웹팩과 번들 파일

• 웹팩 : 프론트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러. 웹 어플리케이션은 코드뿐만 아니라 다양한 이미지 파일, CSS 파일, HTML 파일로 구성되는데, 웹팩에서는 이런 파일을 모듈이라고 함. 웹팩은 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해 주는 역할을 함.
• 번들: 이런 웹팩의 결과물
• npm run build 실행시 웹팩이 프로젝트 디렉터리의 파일을 모두 모아 번들 파일을 만들어줌

핫 모듈 교체

개발 모드에서 소스코드를 수정하거나 기능을 추가하면 변경 사항이 즉각 웹 브라우저에 반영되어 확인할 수 있는 기능. 개발자의 생산성을 높여 주는 역할. (=hot reloading)

웹팩 서버는 처음 빌드한 번들 파일들을 웹브라우저 쪽 index.html파일에 반영하고, 프로젝트에 변경사항이 생기는지 감시. 변경사항이 생기면 해당 부분만 빌드한 뒤 웹브라우저 웹팩 코드와 협업해 실시간으로 변경내용을 반영함

 

 

2장 : 리액트 동작 원리

2-1. 가상 DOM 이해하기

리액트 프레임워크 구성 기본 3요소 : 가상 DOM / JSX 구문 / 컴포넌트

 

react와 react-dom 패키지

react: 리액트 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능을 제공하는 패키지

react-dom/client, server, native : 렌더러라고 하는 패키지. 앱 동작 플랫폼에 종속적인 기능을 제공하는 데 특화된 패키지

- CSR(client-side rendering) 방식 앱은 react-dom/client, SSR(server-side...) 방식 앱은 react-dom/server와 react의 조합으로 만듦

- react와 렌더러 패키지의 경계에는 가상DOM 매커니즘이 있음

 

가상DOM

- 물리 DOM : 가상 DOM과 구별되는 방식. 자바스크립트만 사용하는 개발에서 DOM 객체

- 가상 DOM : 객체의 렌더링을 react-dom 렌더러가 수행함. (root.render()과 같이...). root.render 메서드는 변환한 가상DOM 객체를 부착할 물리DOM객체가 필요하고, 리액트에서는 <div id="root" /> 와 같이 id속성값을 가진 요소가 그 역할을 수행함. 최초 렌더링 이후 가상DOM 트리 구조에 변화가 생겨 다시 렌더링되는 상황에서, 이미 존재하는 물리DOM 트리에 특정 HTML 요소의 속성값을 바꾸게 되는데, 이때 document.getElementbyId('아이디') 로 해당 요소를 찾아 DOM 객체를 얻고 원하는 작업을 수행함

 

2-2. JSX 구문 이해하기

리액트에서는 React.createElement 호출의 복잡성을 해결하고자 자바스크립트 언어에 없는 JSX 기능을 언어 확장 형태로 추가함

JSX 코드는 일반 HTML코드와 유사하게 보이는데, 이는 JSX가 자바스크립트 문법에 JSX 문법을 새로 추가한 형태로 동작할 수 있도록 설계되었기 때문

 

2-3. 컴포넌트 이해하기

컴포넌트

화면 UI를 처리하는 클래스

모델-뷰-컨트롤러(MVC) 모델에 의거하여 구현된 클래스를 의미함

리액트 컴포넌트 : HTML5의 각 태그에 대응하는 리액트 컴포넌트를 제공함

사용자 컴포넌트 : 사용자가 구현하는 사용자 정의 컴포넌트. 카멜케이스 사용

 

클래스 컴포넌트

react 패키지가 제공하는 Component 클래스를 상속해 만드는 컴포넌트

export default class ClassComponent extends Component {
  render() {return null}
}

 

함수 컴포넌트

클래스 컴포넌트에 비해 더 간결한 구현 가능

JSX 구문으로 요소를 반환해 간결한 표현

export default function App() {
  return <h1>function component</h1>
}

 

함수 컴포넌트의 타입: FC<P> (FunctionComponent<P>)

 

2-4. key와 children 속성 이해하기

key 속성 설정하기

export default function App() {
  const texts = [<p key="1">hello</p>, <p key="2">world</p>]
  return <div>{texts}</div>
}

• key - 선택 속성. type: Key | null | undefined
• 같은 이름의 컴포넌트가 여러 개일 때 이들을 구분하기 위한 값. 중복되지 않는 고유한 값을 요구

 

children 속성 설정하기

export default function App() {
  const texts = ['hello', 'world'].map((text, index) => <p key={index} children={text}/>)
  return <div children={texts} />
}

• children - 선택 속성. type: PropsWithChildren | undefined
• 자식 요소를 포함할 수 있는 컴포넌트에서만 사용 가능

 

2-5. 이벤트 속성 이해하기

이벤트

마우스 클릭, 텍스트 입력과 같은 사용자 행위가 일어날 때 이벤트가 발생하였다고 함

Event 타입

종류	설명
type	이벤트 이름. 대소문자 구분x
isTrusted	이벤트가 웹브라우저에서 발생함(true) / 프로그래밍으로 발생함(false)
target	이벤트가 처음 발생한 HTML요소
currentTarget	이벤트의현재 대상 즉 이벤트 버블링 중에서 이벤트가 현재 위치한 객체
bubbles	이벤트가 DOM을 타고 버블링될지 여부 결정

 

이벤트 처리기 (이벤트 핸들러) : 이벤트가 발생하면 해당 이벤트를 코드 쪽에 알려주는 역할. addEventListener 메서드로 이벤트 처리기를 추가할 수 있음

 

리액트에서의 이벤트 처리

on이벤트명(onClick, onMouseEnter...) 형태로 된 HTML 요소의 이벤트 속성들을 제공

이벤트 속성에 설정하는 콜백 함수는 매개변수 e의 타입이 SyntheticEvent 타입임

 

이벤트 버블링

자식 요소에서 발생한 이벤트가 가까운 부모 요소에서 가장 먼 부모 요소까지 계속 전달되는 현상

e.stopPropagation() 메서드로 이벤트 버블링을 막을 수 있음

 

input 요소의 이벤트 처리

<input>요소가 제공하는 속성들은 React.InputHTMLAttributes<HTMLInputElement> 형태로 얻을 수 있음

onChange : 사용자의 입력이 들어올 때 발생하는 이벤트. type속성값에 따라 다른 입력

 

드래그 앤 드롭 이벤트 처리

모든 HTMLElement 상속 요소는 draggable 이라는 bool 속성을 제공함

종류	발생	리액트 이벤트 속성 이름
dragenter	드래그한 요소나 텍스트 블록을 적합한 드롭 대상 위에 올라갔을 때	onDragEnter
dragstart	사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때	onDragStart
drag	요소나 텍스트 블록을 드래그할 때	onDrag
dragleave	드래그하는 요소나 텍스트 블록이 적합한 드록 대상에서 벗어났을 때	onDragLeave
dragend	드래그를 끝냈을 때	onDragEnd
dragover	요소나 텍스트 블록을 적합한 드롭대상 위로 지나갈 때	onDragOver
drop	요소나 텍스트블록을 적합한 드롭대상에 드롭했을 때	onDrop

 

관련 타입 : DragEvent 타입

interface DragEvent extends MouseEvent {
    dataTransfer: DataTransfer | null;
}

 

DataTransfer에서 files 속성으로 파일을 drop했을때 드롭한 파일의 정보를 알 수 있음

preventDefault() : 이벤트에 관련된 웹브라우저의 기본 구현 내용(submit에서 새로고침이라거나...)을 실행하지 않게 함