[D+74] React에 대한 나의 생각

 

D+74

-  React에 대한 나의 생각 -

(리액트 질문에 답하기)

 

---

 

 

• JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요?

대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 되어 가독성이 좋다고 생각한다.
또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해 준다.

 

• JSX를 사용하지 않고 React를 사용할 수도 있나요?

JSX를 사용하지 않고 리액트 엘리먼트를 통해 사용할 수 있다.

 

• JSX에 JavaScript 표현식을 쓰려면 어떤 방법으로 써야 하나요?

JSX안에서의 중괄호({ })를 통하여 유효한 모든 JavaScript 표현식을 넣을 수 있다.

 

• import / export 구문은 어떤 식으로 사용할 수 있나요?

export는 특정 값을 내보내고 import는 export를 통해 나온 것을 들여오는 역할을 한다.
(default로 export 하게 되면 이름을 다르게 해서 받아와도 들어갈 수 있다)

 

•DOM을 처음 배울 때 페이지 단위로 작업하는 방법과 비교해서, 컴포넌트 단위로 개발할 때의 장점은 무엇인가요?

재사용성이 뛰어나고, 테스트할 때의 각각의 컴포넌트가 독립적이기 때문에 테스트 할 때 편리하다.

 

• 하나의 컴포넌트에서 여러 개의 엘리먼트를 리턴할 수도 있나요?

fragment를 통하여 가능하고 또한 단축 문법인 빈 태그로도 가능하다.
허나 fragment에 key가 존재한다면 react.fragment를 명시적으로 선언해야 한다.

 

• <Tweet> 나의 새 트윗 </Tweet>이라는 컴포넌트 사용 방법이 있다고 가정할 때, 컴포넌트 내에서 나의 새 트윗이라는 문자열은 어떻게 접근할 수 있나요?

props.children

 

• props를 다룰 때에 지켜야 하는 엄격한 규칙이 하나 있습니다. 무엇인가요?

모든 react컴포넌트는 자신의 props를 다룰 때, 반드시 순수 함수처럼 동작해야 한다.
순수 함수란, 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 것이다.

 

• 컴포넌트에서 배열의 개수만큼 엘리먼트를 렌더링 하고자 할 때, 어떤 방법으로 렌더링 할 수 있나요?

map() 함수를 통하여 렌더링을 할 수 있다. (forEach는 리턴이 없으므로 할 수 없다)
이때 map() 함수를 적용할 시에, 유니크한 key값도 넣어줘야 에러가 발생하지 않는다.

 

• props와 state의 차이점은 무엇인가요?

props는 읽기 전용으로 변하면 안 된다.
state는 특정 컴포넌트가 가질 수 있는 변할 수 있는 상태이다.

 

• 상태를 변경할 때 사용되는 this.setState는 어떻게 사용하나요?

this.setState (생명주기와 연관)

 

•React에서 이벤트를 처리할 때에 HTML에서와 다른 특징은 무엇인가요?

this.bind

 

• 이벤트 처리 시, 이벤트 핸들러를 다음과 같이 this 바인딩을 해줘야 하는 이유가 무엇인가요?

this가 가리키는 게 window나 global이기 때문이다.