React Q&A - 1
Q&A
1. 양방향 바인딩이 무엇인가요?
1-1. 기본적인 의미
- 사용자의 입력값에 따라 JS의 데이터가 변경되고, JS의 데이터가 변경되면 사용자의 화면도 변경시키는 것이다. (React는 단방향 이기 때문에 Event가 필요하다)
=> 즉, 입력값의 변화를 감시하고 + 입력값으로 들어오는 새로운 값으로 업데이트 해준다. - 리액트에서는 기본적으로 양방향 바인딩을 지원하지 않고, 단방향을 양쪽으로 하는것으로 흉내내는 것이다.
💡 참고: Angular등에서는 Event자체를 안쓰고 컨트롤러, 뷰의 데이터가 일치하는것을 양방향 바인딩이라고 부른다.
1-2. Lifting State up
- 자식 컴포넌트의 데이터를 부모 컴포넌트로 올려보내는 방법이다.
- 부모 컴포넌트에서 state를 매개변수로 받는 함수를 만들어서 자식 컴포넌트의 props로 넣고 자식 컴포넌트에서 함수를 사용하는데 변화한 값을 인자로 넣어주면 부모 컴포넌트에서 이용이 가능하다.
- 부모 컴포넌트에서 state를 매개변수로 받는 함수를 만들어서 자식 컴포넌트의 props로 넣고 자식 컴포넌트에서 함수를 사용하는데 변화한 값을 인자로 넣어주면 부모 컴포넌트에서 이용이 가능하다.
2. SPA와 MPA란 무엇인가요?
2-1. SPA(Single Page Application)
- 이름 그대로 단일 페이지로 구성된 앱으로, 일반적으로 CSR (Client Side Rendering)방식으로 렌더링한다.
- next.js를 이용한다면 SSR, SSG로도 렌더링할 수 있다.
- 첫 요청시 모든 정적 리소스를 한번에 불러오고 이후에는 페이지 이동시 변화되는 부분만 화면을 갱신한다.
2-2. MPA(Multi Page Application)
- 여러 개의 페이지로 구성된 앱으로, SSR(Server Side Rendering)방식으로 렌더링한다.
- 새로운 페이지를 요청할 때마다 리소스가 다운되고 전체 페이지를 다시 렌더링한다.
- 페이지마다 meta tag를 붙여서 SEO(Serach Engine Optimization)를 관리하기 용이하다.
3. <form>을 사용할 때, submit이벤트를 사용하면 리덕스 데이터가 초기화되는 이유가 무엇인가요?
- submit이벤트의 기본 이벤트가 양식에 입력된 값을 서버로 전송하는데 액션 속성으로 인하여 바로 타켓페이지로 이동하게 되기때문에 초기화가 된다.
- 이벤트의 매개변수로 이벤트 객체를 받아서 preventDefault()메서드를 이용해서 브라우저 기본 동작을 방지할 수 있다.
Reference
https://www.udemy.com/course/best-react/
https://velog.io/@shin6403/SPA-MPA-CSR-SSR
Author And Source
이 문제에 관하여(React Q&A - 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@llama/React-QA-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)