QnA

43. <a> 태그에 페이지 이동 설정

Route 설정 시 <a> 태그에 href를 #go-to-movie로 설정한 이유는 href가 필수 속성이라서 그런건가요?

<a
  href="#go-to-movies"
  onClick={(e) => {
    e.preventDefault()
    history.push('/movies')
  }}
>

42. 📍 import() vs fetch() 차이점

두 메서드 전부 Promise 객체를 반환하여 then(), catch()를 사용할 수 있습니다. 반면에 이 둘의 차이점은 어떤건가요?

37. 리액트 폼 예제

위의 예제에서 onInputComplete의 역할?

A.37

onInputComplete속성은 input의 value 값을 인자로 받는 콜백함수를 <FormControl /> 컴포넌트에 전달하는 속성이다.

36. 스타일드 컴포넌트 props 할당

아래 예제는 스타일드 컴포넌트의 정적/ 동적 props 할당입니다. 이때 정적 props 인 type: "text"가 왜 우선순위를 갖지 않고 무시되나요?

A.36

정적 props보다 요소에 적용 된 props가 우선순위가 된다.

35. beforeunload 이벤트

인증 예제의 App 파일의 사이드 이펙트 내부에서 사용된 코드입니다. 아래 예제에서 beforeunload 이벤트가 사용된 이유는 무엇인가요?

인증 예제React

A.35

해당 예제는 페이지를 떠날 수 있는 구조가 아니기 때문에 window.beforeunload 이벤트를 사용할 수 없다.

34. ~ 경로의 의미

경로를 설정할 때 ~/는 홈 디렉토리를 가리킨다고 알고 있습니다. 저장소의 파일트리에서도 ~/는 홈 디렉토리를 가리키나요?

33. sourceMap

Webpack과 creat-react-app에서 스타일 파일의 sourceMap 설정을 다르게 하는 건가요?

아래 처럼 Webpack과 같은 방식으로 creat-react-app 설정하면 안되나요?

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() 구문

import { add } from './math';

import("./math").then(math => {
  console.log(math.add(16, 26));
});

아래 import().then() 구문을 사용하면 math 파일의 add를 불러 와서 바로 작업?을 실행하는 건가요?

아래의 구문은 언제 사용되는 구문인가요?

A.31

애플리케이션의 성능 최적화를 위해 코드 분할 시 사용 되는 import() 구문이다.

코드 분할(조각)React

30. .env 파일의 역할?

.env 설정은 Sass에서 config 파일의 변수 설정과 같나요?

A.31

보안 처리를 목적으로 사용하는 환경 변수 파일이다. 서버 측에서 환경 변수를 설정할 때 사용한다. (보안과 직결되는 민감한 정보를 저장하는 파일이기 때문에 서버의 백엔드 개발 영역에서 관리한다.)

하지만 프론트엔드 단에서 .env 파일에 환경 변수를 설정할 경우 빌드 될 때, JS, CSS 등과 같이 빌드 되기 때문에 내부의 데이터가 모두 공개 된다. 그렇기 때문에 프론트엔드 단에서 사용시 주의해야 한다.

참고 → CRA 공식 문서에 나온 .env에 관한 내용

29. 객체 참조의 .current

객체 참조에서 이벤트가 실행되는 대상을 찾을 때, 아래와 같은 구문으로 current를 사용해서 찾게 되는데 이 때, .current 속성은 객체 참조(ref)를 사용할 때 해당 ref 속성이 어느 요소에 사용 되어 있는지 확인 할 때 사용하는 속성인가요?

this.fileInput.current

A. 29

맞다. ref 속성이 적용되어 있는 요소가 .current 에 참조 되어 있다.

28. file은 배열로 반환되나요?

files에 접근할 때 배열에 접근하는 방식으로 접근하는데 files객체는 배열인가요?

handleSubmit = (event) => {
    event.preventDefault();
    console.log(`선택된 파일: ${this.fileInput.current.files[0].name}`)
}

A. 28

files 객체는 배열로 반환된다. 콘솔에 아래와 같이 출력하면 배열이 나온다.

console.log(this.fileInput.current.files)

27. 객체 참조(Ref)의 클래스 필드 문법

객체 참조(Ref) 문법은 클래스 필드 문법으로는 사용할 수 없나요?

constructor(props) {
  super(props);
  this.fileInput = React.createRef();
}

A.27

사용할 수 있다. 아래와 같이 사용하면 된다.

fileInput = React.createRef();

26. 리액트 option 요소 초기값 설정

리액트에서 option 요소의 초기값을 설정할 때 value 속성을 사용한다고 하는데 정확하게 어떻게 사용하는지 모르겠습니다.

state = {
  value: "redux"
}

render() {
  return (
    <select
      value={this.state.value}
      onChange={this.handleChange}
    >
      <option value="react">React</option>
      <option value="redux">Redux</option>
      <option value="reactRouter">React Router</option>
    </select>
  )
}

A.26

value로 관리 한다는 이야기는 개발자가 기본값으로 설정하고 싶은 선택지의 value를 상태의 value로 설정한다는 것이다. 위와 같이 기본값을 state로 설정하면 된다.

HTML의 <option> 요소에서 selected는 필수 값이 아니다 그래서 React에서 option요소에 value를 기본값을 설정하는 것은 필수가 아니고 선택사항이다.

25. 객체의 변수에 접근?

e.target을 구조 분해 할당하고 name 변수를 설정할 때, name을 [] 괄호로 묶어줘야하는 이유가 뭔가요?

A.25

ES6의 향상된 객체 표기법의 계산된 속성을 사용하였다. 이를 사용하면 동적으로 변경이 가능하다.

위의 이미지 처럼 name을 대입하게 되면 
["name"]: value 이와 같이 대입이 된다. 
이 구문은 [name]: value 처럼 리액트가 읽는다.

24. context에 대해서

아래 이미지에서 this.context는 LectureContext에서 불러와진 context인가요 아니면 <LectureContext.Consumer>에서 받아온 값인가요?

23. Consumer value 수요

AppMain.js에서 아래의 구문으로 Lecturers에 속성(props)를 전달 했는데 사실 저 구문이 이해가 안갑니다. Lecturers를 컴포넌트로 불러와서 또 다시 Lecturers 컴포넌트로 속성을 전달하는건가요? 왜...?

또한 아래의 문제를 해결하기 위해 Context Type를 사용하는데 왜 문제인가요?

// AppMain.js 
import Lecturers from '../Components/Lecturers'

<LectureContext.Consumer>
    {({ lecturers }) => <Lecturers instructor={lecturers} />}
</LectureContext.Consumer>

A.23

위의 구문은 <Lecturers /> 컴포넌트의 부모 컴포넌트에서 받아온 value 속성을 전달하는 구문이다. 왜 이해를 못했니... 잘 이해가 안간다면 Count Number 예제에서 사용한 아래의 구문을 기억하자.

import CountDisplay from './CountDisplay'

<CountDisplay count={this.state.count} />

22. Context를 불러오지 못함

App.js에서는 LectureContext를 잘 문제 없이 잘 불어왔지만 AppMain에서는 LectureContext를 불러오는 과정에서 LectureContext를 찾을 수 없다고 오류가 뜹니다. 문제가 무엇인가요?

/src/layout/AppMain.js Line 2:8:

'LectureContext' is defined but never used no-unused-vars

Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.

A.22

컴포넌트를 불러왔으나 해당 파일에서 사용하지 않는 경우 위와 같은 경고 메세지가 뜬다.

21. 용어 정리

아래의 구문을 설명할 때, "LectureContext객체 Provider 컴포넌트를 사용한다." 라고 말하는게 맞다.


<LectureContext.Provider
  value={{
    lecturers: this.state.FEML_lecturers,
    removeLecture: this.removeLecture,
  }}
>

19. createContext()

createContext()에는 무엇을 전달하는 건가요?

A.19

value의 기본 값을 전달한다.

컨텍스트의 value?React

17. 이벤트의 화살표 함수

각 예제에서 onclick 이벤트 함수를 바인딩 할 때 화살표 함수를 사용하는 예제와 아닌 예제가 있는데 이때 무엇 때문에 쓰임이 다른지 모르겠습니다.

복잡한 컴포넌트 통신에서 예제

이벤트 함수를 바인딩 할 때 화살표 함수를 사용한다.

// Lecture.js 

<button type="button" onClick={() => handleRemoveLecturer(lecturer.id)}>
    제거
</button>

Number Count 예제

이벤트 함수를 요소에 바인딩 할 때 화살표 함수를 사용하지 않는다.

 // CountControl.js 
 
 <button type="button" onClick={props.handleCount.increase}>
   +
 </button>

A.17

Lecture.js에 적용 된 것은 함수를 변수에 할당하지 않고 바로 함수식을 입력한 것이다. CountControl.js는 함수 식을 변수에 담아 해당 변수를 바인딩 한 것이다.

16. state 업데이트

getSnapshotBeforeUpdate()의 역할이 정확하게 뭔지 모르겠습니다.

15. 커스텀 PropTypes

경고 메지시가 뜨지만 정상적으로 렌더링이 됩니다. 이 경우 오류 메세지와 함께 렌더링이 되지 않도록 하는 방법이 있을까요?

A.15

전달하는 속성의 유형의 문제이다. number을 입력해야 했지만 실제 입력한 값은 "10"이다. 문자값을 전달한 것이다.

14. Component 창

아래와 같은 Component 창은 확장을 설치하는 건가요?

A.14

13. map() 구조분해 할당

map() 메서드의 콜백 함수에서는 구조 분해 할당을 할 수 없나요?

아래와 같은 코드를 조금 더 간소화 하기 위해 구조 분해 할당을 시도했습니다.

{this.props.instructor.map((lecturer) => (
  <Lecture key={lecturer.id} lecturer={lecturer}>
    <figure className="lecturer-info">
      <img src={lecturer.image} alt="" className="lecturer-photo" />
      <figcaption>
        {lecturer.module} 모듈을 담당 할 {lecturer.name} 강사 Facebook
        바로가기
      </figcaption>
    </figure>
  </Lecture>
))}

아래와 같이 전달된 매개 변수에 객체 구조 분해 할당으로 시도 했을 때 렌더링은 문제없이 됐으나 이상하게 key 값이 고유하지 않다는 오류 메시지가 떴습니다. (다른 속성들은 문제 없이 순환하여 렌더링 되었습니다.)

{this.props.instructor.map((lecturer, { id, image, module, name }) => (
  <Lecture key={id} lecturer={lecturer}>
    <figure className="lecturer-info">
      <img src={image} alt="" className="lecturer-photo" />
      <figcaption>
        {module} 모듈을 담당 할 {lecturer.name} 강사 Facebook 바로가기
      </figcaption>
    </figure>
  </Lecture>
))}

key 문제를 해결하기 위해 콜백함수 내부에 const를 사용해서 구조 분해 할당을 시도 했으나 이번엔 문법 오류로 아예 렌더링 되지 않았습니다.

{this.props.instructor.map((lecturer) => (
  const { id, image, module, name } = lecturer 
  <Lecture key={id} lecturer={lecturer}>
    <figure className="lecturer-info">
      <img src={image} alt="" className="lecturer-photo" />
      <figcaption>
        {module} 모듈을 담당 할 {lecturer.name} 강사 Facebook 바로가기
      </figcaption>
    </figure>
  </Lecture>
))}

위와 같이 map()의 콜백 함수에서 구조 분해 할당을 하고 id 속성을 순환하기 위해서 어떻게 해야하나요?

A.13

만약 map() 구조 분해 할당을 한다면 아래와 같이 콜백 함수 안에 const로 구조 분해 할당한 변수를 선언하고 return 키워드를 사용해서 반환할 React 요소를 입력해야한다.

{this.props.instructor.map((lecturer) => {
  // return 전에 구조 분해 할당 
  const { id, image, module, name } = lecturer 
  // return 시, React 요소 괄호로 묶어주기 
  return (
    <Lecture key={id} lecturer={lecturer}>
      <figure className="lecturer-info">
        <img src={image} alt="" className="lecturer-photo" />
        <figcaption>
          {module} 모듈을 담당 할 {name} 강사 Facebook 바로가기
        </figcaption>
      </figure>
    </Lecture>
  )
}}

map() 메서드는 return 키워드를 생략해도 값을 반환한다.

// map()은 값을 반환하는 메서드이기 때문에 return을 생략해도 값을 반환한다. 
// 아래의 두 개의 표현식은 같은 것을 의미한다. 
{this.props.instructor.map((lecturer) => () }
{this.props.instructor.map((lecturer) => return () }

map()의 콜백 함수의 첫번째 매개 변수를 구조 분해 할 변수로 입력한다면 아래와 같이 해당 매개변수는 lecturer의 객체를 구조 분해 할당 했다는 것을 명시 해야한다.

{this.props.instructor.map(({ id, image, module, name }) => {
  const lecturer = { id, image, module, name } 
  return (
    <Lecture key={id} lecturer={lecturer}>
      <figure className="lecturer-info">
        <img src={image} alt="" className="lecturer-photo" />
        <figcaption>
          {module} 모듈을 담당 할 {name} 강사 Facebook 바로가기
        </figcaption>
      </figure>
    </Lecture>
  )
}}

12. 클래스 컴포넌트

클래스 컴포넌트는 왜 props에 바로 접근할 수 없나요?

A.12

클래스 컴포넌트는 생성된 인스턴스의 속성에 바로 접근할 수 없다. 그렇기 때문에 인스턴스를 참조하고 있는 this에 먼저 접근해서 this의 속성(prop)에 접근해야 한다. 즉, 클래스 컴포넌트에서 props에 접근할 때는 this.props로 접근한다.

11. constructor의 기능

constructor()의 기능이 생성자 함수를 만드는 기능을 하는 건가요?

A.11

constructor()은 생성자 함수를 만든다. 생성자는 클래스 생성시 단 한번만 실행된다. 또한 반드시 생성자 함수 안에는 super()가 있어야한다 .

constructor(props) {
    super(props)
}

10. 오류 노트

아래의 오류가 어떤 오류를 말하는 건가요?

A.10

이미지의 상단에 대문짝만 하게 적혀 있다. "Cannot read property 'name' of undefined" name이라는 속성을 읽을 수 없다는 것이다. 즉, props.use.name이 없다는 것이다.

9. 전달 속성

아래의 표시한 구문은 객체의 속성 값을 복사 하는 것인가요?

A.9

props.rating 데이터를 rating이라는 임의의 속성에 담아 RatingStars 컴포넌트에 전달하는 것이다. 그렇기 때문에 RatingStars는 이제 props.rating를 가진 rating이라는 속성을 갇게 된다.

8. props가 가리키는 데이터 ?

마지막의 this.props가 가리키는 데이터가 무엇인가요?

또한 DeliveryComment = (props) => {}구문에서 props 매개변수가 받는 데이터가 어떤 데이터를 가리키는지 모르겠습니다.

A. 8

props는 해당 컴포넌트가 전달받은 데이터를 인자로 받는 매개변수이다. 그렇게 때문에 props.name, props.rating 키워드로 데이터에 접근이 가능한 것이다.

컴포넌트에서 해당 props에 전달받은 데이터가 무엇인지 확인하는 방법

클래스 컴포넌트에서 아래와 같이 constructor()을 사용해서 확인이 가능하다.

export default class Lecturer extends Component {
  constructor(props) {
    console.log(props)
    console.log(props.instructor)
    super(props)
  }
}

함수형 컴포넌트에서는 .....?

7. {}란 무엇인가요?

아래의 코드에서 {props.image}에서 {}는 무엇인가요?

function MenuListItem(props) {
  console.log(props.image, props.caption)
  return (<li class="ediya-menu__item">
      <a href="#" role="button" aria-haspopup="dialog" aria-pressed="false">
        <figure>
          <img 
            src={props.image} 
            alt="" 
            width="323" 
            height="323" />
          <figcaption>ICED 벚꽃라떼</figcaption>
        </figure>
      </a>
      <div role="dialog" aria-modal="false" aria-labelledby="dialog-1-label">
        <h3 id="dialog-1-label" class="a11y-hidden">ICED 벚꽃라떼</h3>
      </div>
    </li>
    )
}

A.7

ES6의 템플릿 리터럴과 유사한 방식으로 사용되는 JSX의 속성 보간법이다.

React에서는 템플릿 엔진을 사용하지 않고 싱글 컬리 브레이스({}, Curly Brackets)를 사용한다. 반면, Vue, Angular는 템플릿 엔진을 사용하며 더블 컬리 브레이스({{}})를 사용한다. (참고로 앵글 브레이스는 각괄호(<>, angle brace)이다. )

ES6는 정식 명칭은 아니다. 정식 명칭은 ECMAScript2015이다. 하지만 관례적으로 ES6로 줄여서 사용하고 있다.

그럼 모던 자바스크립트로 명칭하는 것은 어떤가? 이 부분에도 문제가 있다. 어느시기부터 어디까지가 모던 자바스크립트으로 칭할지 정해진 부분이 없으니 약간 애매한 부분이다.

6. Mac 단축키 사용

codepen에서는 단축키가 적용되지 않습니다. 어떻게 사용하나요? (예를들어 cmd + D 같은 것)

A.6

현재 VScode에서 사용하고 있는 단축키는 VScode에 기본 설정된 단축키가 아니다. 사용자 정의로 설정된 단축키이다. 기본 설정된 단축키는 상단 메뉴바에서 확인 가능하다.

5. 런타임 환경이란?

A.5

런타임 환경(영어: runtime environment)은 컴퓨터가 실행되는 동안 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신의 상태이다.

흔히 Node.js 런타임 환경이라고 한다.

4. prettier 세미콜론 사용

prettier의 세미콜론 제거 설정을 변경하고 싶은데 설정이 되지 않습니다. 어떻게 해야하나요?

A.4

적용이 되는 우선 순위가 있다. 정리해둔 문서 참고

3. 공백 넣기

item과 button 사이에 공백을 넣으려면 어떻게 해야 하나요?

A.3

아래와 같이 ' '을 추가하면 된다.

  var lists = data.map(function (item, index) {
    return h('li', [item, ' ', deleteButton])
  })

2. Virtual DOM과 JSX

Virtual DOM과 JSX은 요소를 추가하는 방법인 건가요? 상황에 따라 적절하게 사용하는 건가요?

A.2

이 둘은 리액트를 구성하는 코어이다.

1. React 실행 방법

실습 파일을 다운받아 npm start 명령어를 사용해서 React를 실행하려고 보니 실행이 되지 않았다. 이유는 아직 React가 설치되어 있지 않았기 때문이다. 이것을 확인하는 방법은 파일트리에 node_modules 디렉토리가 있느냐는 것이다.

만약 node_modules 디렉토리가 없는 상태에서 package.json의 dependencies에 아래와 같이 설계가 되어 있다면 그것은 npm i 명령어를 사용했을 때 설계되어 있는 패키지 목록이 전부 설치된다는 뜻이다. 항상 확인하는 습관을 들이자!

결론, 항상 node_modules 파일의 존재 유/무를 확인하고 패키지가 설치되어 있는지 확인하자

package.json에 설치할 패키지가 설계되어 있다면 npm i 명령어를 사용하면 자동으로 전부 설치 된다.

PreviousReact TIL Next예제 모음

Last updated 4 years ago

Was this helpful?