> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/til/qna.md).
# QnA
## 43. \ 태그에 페이지 이동 설정
Route 설정 시 \ 태그에 href를 #go-to-movie로 설정한 이유는 href가 필수 속성이라서 그런건가요?
```javascript
{
e.preventDefault()
history.push('/movies')
}}
>
```
## 42. 📍 import() vs fetch() 차이점
두 메서드 전부 Promise 객체를 반환하여 then(), catch()를 사용할 수 있습니다. 반면에 이 둘의 차이점은 어떤건가요?
## 37. 리액트 폼 예제
{% embed url="" %}
위의 예제에서 `onInputComplete`의 역할?
#### A.37
`onInputComplete`속성은 `input`의 `value` 값을 인자로 받는 콜백함수를 `` 컴포넌트에 전달하는 속성이다.
## 36. 스타일드 컴포넌트 props 할당
아래 예제는 스타일드 컴포넌트의 정적/ 동적 props 할당입니다. 이때 정적 props 인 `type: "text"`가 왜 우선순위를 갖지 않고 무시되나요?
{% embed url="" %}
#### A.36
정적 props보다 요소에 적용 된 props가 우선순위가 된다.
## 35. beforeunload 이벤트
인증 예제의 App 파일의 사이드 이펙트 내부에서 사용된 코드입니다. 아래 예제에서 `beforeunload` 이벤트가 사용된 이유는 무엇인가요?
{% embed url="" %}
#### A.35
해당 예제는 페이지를 떠날 수 있는 구조가 아니기 때문에 `window.beforeunload` 이벤트를 사용할 수 없다.
## 34. \~ 경로의 의미
경로를 설정할 때 `~/`는 홈 디렉토리를 가리킨다고 알고 있습니다. 저장소의 파일트리에서도 `~/`는 홈 디렉토리를 가리키나요?
## 33. sourceMap
Webpack과 creat-react-app에서 스타일 파일의 sourceMap 설정을 다르게 하는 건가요?
아래 처럼 Webpack과 같은 방식으로 creat-react-app 설정하면 안되나요?
```javascript
loader: 'sass-loader',
options: {
sourceMap: true,
},
```
#### A.33
Webpack과 creat-react-app은 다른 것이다. creat-react-app은 Webpack을 패키징할 뿐이다.
즉, creat-react-app 내부에서 Webpack을 사용하는 것이지 두개의 도구는 같지 않다. 그래서 설정하는 방식도 다른 것이다.
## 32. 코드 분할이란?
Webpack과 React를 배울 때 코드 분할에 대해 자주 듣긴 했지만 정확한 역할을 잘 모르겠습니다.
#### A.32
Q.31 참고
## 31. import().then() 구문
```javascript
import { add } from './math';
```
```javascript
import("./math").then(math => {
console.log(math.add(16, 26));
});
```
아래 `import().then()` 구문을 사용하면 `math` 파일의 `add`를 불러 와서 바로 작업?을 실행하는 건가요?
아래의 구문은 언제 사용되는 구문인가요?
#### A.31
애플리케이션의 성능 최적화를 위해 코드 분할 시 사용 되는 `import()` 구문이다.
{% embed url="" %}
## 30. .env 파일의 역할?
`.env` 설정은 Sass에서 config 파일의 변수 설정과 같나요?
A.31
보안 처리를 목적으로 사용하는 환경 변수 파일이다. 서버 측에서 환경 변수를 설정할 때 사용한다. (보안과 직결되는 민감한 정보를 저장하는 파일이기 때문에 서버의 백엔드 개발 영역에서 관리한다.)
하지만 프론트엔드 단에서 .env 파일에 환경 변수를 설정할 경우 빌드 될 때, JS, CSS 등과 같이 빌드 되기 때문에 내부의 데이터가 모두 공개 된다. 그렇기 때문에 프론트엔드 단에서 사용시 주의해야 한다.
{% hint style="info" %}
참고 → [CRA 공식 문서에 나온 `.env`에 관한 내용 ](https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used)
{% endhint %}
## 29. 객체 참조의 .current
객체 참조에서 이벤트가 실행되는 대상을 찾을 때, 아래와 같은 구문으로 `current`를 사용해서 찾게 되는데 이 때, `.current` 속성은 객체 참조(`ref`)를 사용할 때 해당 `ref` 속성이 어느 요소에 사용 되어 있는지 확인 할 때 사용하는 속성인가요?
```javascript
this.fileInput.current
```
#### A. 29
맞다. `ref` 속성이 적용되어 있는 요소가 `.current` 에 참조 되어 있다.
## 28. file은 배열로 반환되나요?
files에 접근할 때 배열에 접근하는 방식으로 접근하는데 files객체는 배열인가요?
```javascript
handleSubmit = (event) => {
event.preventDefault();
console.log(`선택된 파일: ${this.fileInput.current.files[0].name}`)
}
```
#### A. 28
files 객체는 배열로 반환된다. 콘솔에 아래와 같이 출력하면 배열이 나온다.
```javascript
console.log(this.fileInput.current.files)
```
## 27. 객체 참조(Ref)의 클래스 필드 문법
객체 참조(Ref) 문법은 클래스 필드 문법으로는 사용할 수 없나요?
```javascript
constructor(props) {
super(props);
this.fileInput = React.createRef();
}
```
#### A.27
사용할 수 있다. 아래와 같이 사용하면 된다.
```javascript
fileInput = React.createRef();
```
## 26. 리액트 option 요소 초기값 설정
리액트에서 option 요소의 초기값을 설정할 때 value 속성을 사용한다고 하는데 정확하게 어떻게 사용하는지 모르겠습니다.
```javascript
state = {
value: "redux"
}
render() {
return (
)
}
```
#### A.26
value로 관리 한다는 이야기는 개발자가 기본값으로 설정하고 싶은 선택지의 value를 상태의 value로 설정한다는 것이다. 위와 같이 기본값을 state로 설정하면 된다.
HTML의 \