[항해99 ] React 입문 주차 팀과제 Answer

팀 과제 질문 답변 (모범 답변 및 우리 조 답변 참고해서 새로 정리)

 

1. 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?

• 차이점 : 배열의 내장함수 사용 여부
• Array.from, 해당 유사배열이 사용할 수 있는 반복문 등을 이용해 배열로 바꾼 후 배열의 내장함수를 통해 변경하거나 유사배열 요소 하나하나에 직접 접근해 바꾸어야 한다.

유사배열

배열의 형태로 ([ ])로 생겼지만 배열의 내장함수를 사용하지 못하는 배열

Array.from 함수 예시 ↓

// 배열화 한다.
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const text_array = Array.from('hello', (item, idx) => {return idx});

console.log(text_array);


// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});

console.log(new_array);

 

2. 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

 

 

3. 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

- 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르면 단방향, 부모가 자식에게 데이터를 전달해주고, 자식이 그 데이터를 관리(수정 등)할 수 있으면 양방향 바인딩입니다.

-양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하다가 데이터가 변경되는 시점에 DOM객체에 렌더링을 해주거나 페이지 내에서 변경을 감지해 JS실행부에서 변경된다. HTML -> JS, JS -> HTML

=> 장점으로는 코드의 사용면에서 코드량이 크게 줄여 준다.

=> 단점으로는 변화에 따라 DOM 객체 전체를 랜더링 해주거나 데이터를 바꿔주므로 성능이 감소되는 경우가 있다.

 

4. 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. document.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

• document를 통한 접근은 해당 컴포넌트에 있는 어떤 DOM 요소 뿐 아니라 화면 자체, 즉 개발자 도구로 볼 수 있는 전체 document에 접근하는 거예요. 😖
• 게다가 document.get~~~~가 실행되는 위치에서 해당 DOM요소가 화면에 그려져 있을 것이라는 확신을 갖기도 어려워요. (화면에 마운트 되기 전일 수 있고, 이 경우 분명 오류가 나겠죠!)
• 하여, useRef()등을 사용하여 특정 DOM 요소에 접근합니다.

5. s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요?

• 브라우저 주소창에 주소를 찍고 페이지를 이동했을 때, S3에서는 해당 주소 /home이라면 home.html을, /login이라면 login.html을 찾아 보여주려고 하기 때문입니다. (우리는 index.html 하나만 가지고 있으니까 당연히 찾을 수 없겠죠!)
• 해결 방법 : 정적 웹 사이트 호스팅 설정에서 error시 보여줄 페이지를 index.html로 바꿔주면 됩니다.

---

6. event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

-useEffect 훅을 사용한다. useEffect 훅의 return에서 이벤트 리스너를 해제할 수 있다.

React.useEffect(() => {
	...
	return () => window.removeEventListener("어떤 이벤트", 어떤 함수);
}, []);

 

https://writingcode.tistory.com/38

Event Listener

 

7. SPA 방식과 MPA 방식은 무엇인가요?

• SPA는 html을 하나만 갖고, MPA는 여러개의 html을 갖고 있습니다.
• 특정 주소의 페이지를 보여달라고 요청이 왔을 때, SPA 방식은 한 html을 가지고 여러 페이지인 척 가진 자원을 쪼개 보여주고, MPA는 그때 그때 주소에 맞는 html을 보여줍니다.

https://writingcode.tistory.com/39

SPA 방식과 MPA 방식