리액트 소개
JSX
요소와 컴포넌트를 이용한 뷰 구축
-
컴포넌트란 무엇인가?
:: 컴포넌트란 UI를 더 작은 조각으로 나누어 독립적이며, 재사용가능한 코드 블록이다. -
컴포넌트를 생성하는 방법에는 무엇이 있는가?
:: 2가지가 있다. 함수형 컴포넌트와 클래스형 컴포넌트. -
요소와 컴포넌트의 차이는?
:: 화면에 무엇을 그릴지 적어 놓는 UI 객체 이다. 즉 설계도의 역할을 하며, 설계도를 생성하기 위한 틀이 컴포넌트이다.
// 이것은 컴포넌트 (틀) 입니다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>; // 요소들을 반환함
}
// 이것은 요소 입니다.
const element = <Welcome name="홍길동" />;
- 순수컴포넌트란?
:: 순수컴포넌트란 props랑 state가 동일하다면 동일한 출력을 렌더링 하는 컴포넌트를 의미한다. Memoize API를 사용해서 함수 컴포넌트 내에서 순수 컴포넌트를 구현 할 수 있다.
cf) 순수하지 않는 컴포넌트란?
:: 렌더링 도중에 외부 상태를 바꾸거나 무작위 값을 생성하면 순수성이 꺠진다.
function RandomComponent() {
const [count, setCount] = useState(0);
// 렌더링 도중에 Math.random()을 호출함 -> 출력값이 매번 달라짐!
const randomValue = Math.random();
// 렌더링 도중에 외부 변수를 수정함 (Side Effect)
document.title = `클릭 횟수: ${count}`;
return <div>{randomValue}</div>;
}
function PureComponent() {
const [count, setCount] = useState(0);
// 딴짓(Side Effect)은 렌더링이 끝난 뒤에 따로 실행!
useEffect(() => {
document.title = `클릭 횟수: ${count}`;
}, [count]);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
- 고차 컴포넌트란 무엇인가?
:: 컴포넌트를 받아서 새로운 컴포넌트를 반환하는 함수를 의미한다.
mport React from 'react';
// 이것이 고차 컴포넌트(HOC)입니다.
const withLoading = (WrappedComponent) => {
// 새로운 컴포넌트를 반환합니다.
return ({ isLoading, ...props }) => {
// 1. 로딩 중일 때 보여줄 공통 로직
if (isLoading) {
return <div>데이터를 불러오는 중입니다... 잠시만 기다려주세요.</div>;
}
// 2. 로딩이 끝났을 때 원래 컴포넌트에 나머지 props를 전달하며 렌더링
return <WrappedComponent {...props} />;
};
};
export default withLoading;
props와 state를 활용한 컴포넌트 데이터 제어
- 리액트에서 props란 무엇인가?
:: props는 property를 나타내며, 개별 값 또는 여러 값을 담고 있는 객체 형태로 컴포넌트에 전달되는 인수이다. props는 컴포넌트 트리 내에서 컴포넌트간에 통신하는 채널로 작동한다. 아래가 예시이다.
function Employee(props) {
const {name, age} = props
return (
<>
<span>Name : {name}</span>
<span>Age : {age}</span>
</>
)
}
-
리액트의 state에 대해서 설명할 수 있는가?
:: 컴포넌트에 속하는 속성값을 저장하는 내장된 자바스크립트 객체이다. state에서 중요한 부분은 state값이 바뀌면 컴포넌트가 리렌더링된다. -
props와 state의 가장 큰 차이점은?
:: props는 불변이며 컴포넌트간 데이터 전달에 역할을 한다. props는 읽기 전용이다. 반면 state는 동적인 데이터로써, 내부 함수 setState를 통해서 값을 변경하며 불변성을 유지한다. 그리고 비동기적으로 변경된다. 둘의 공통점은 데이터가 변경시에 리액트가 감지하여 리렌더링을 일으킨다.
- 리액트는 어떻게 여러개의 state를 일괄적으로 처리하는가?
:: 리액트는 각 state가 업데이트될떄 컴포넌트가 리렌더링 되는것을 방지한다. 리액트 내장된 훅을 사용해서 이벤트 핸들러내에서 업데이트를 그룹화함으로써 애플리케이션의 성능을 최적화 한다.
-
자동일괄처리를 방지할 수 있는가?
:: flushSync API를 함수를 통해서 방지할 수 있다. -
어떻게 state내부의 객체를 업데이트 하는가?
:: 직접 업데이트가 아닌 setState를 사용해서 업데이트한다.
setWeather({
...weather,
[e.target.name] : e.target.value
})
- 어떻게 중첩된 state 객체를 업데이트 하는가?
:: 별도의 중첩된 객체를 생성하거나 혹은 전개연산자를 활용해서 업데이트를 한다. 전통적인 방식이 번거롭다면, 서드파티인 imer를 활용해서 업데이트 할 수 있다.
Key Prop의 중요성
- key prop이란 무엇이며, 그 목적은 무엇인가?
:: 리스트 아이템을 렌더링시에 포함되어야 하는 특별할 속성이다. 각 아이템의 값이 변경이 되면 리렌더링이 되어야 하는데, 아이템 안에서 변경이 되었는지 식별 할 수 있는 값이다.
이벤트 처리
- 합성 이벤트란(synthetics) 무엇인가?
:: 브라우저의 실제 네이티브 이벤트 객체를 감싼 크로스 브라우저 래퍼이다. 아래 예시처럼 이벤트를 발생시킬때 실행되는 이벤트 핸들러의 인자에 리액트에서는 synthetics 이벤트를 전달받는다
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setUserInfo(prevState => ({
...prevState,
[name]: value
}));
}
리액트 이벤트 핸들러와 HTML 이벤트 핸들러의
- 차이점은 무엇인가?
::: 명명 규칙( HTML은 이벤트명을 소문자로 리액트는 카멜케이스), 기본 동작 방지, 함수 호출하는 부분에서 차이를 둔다
명명규칙
<button onclick="handleClick()">SignUp</button> // html
<button onClick={handleClick}>SignUp</button> // react
기본동작 방지 : 이벤트의 기본동작을 방지한다. HTML은 이벤트 핸들러 내부에서 fals를 리턴하면서 방지하고 리액트에선 event.preventDefault라는 메서드를 호출 해서 방지할 수 있다.
<form onsubmit="console.log('form을 제출!'); return false">
...
</form>
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault // 기본동작 방지
}
<form onSubmit={handleSubmit}>
...
</form>