TIL 39: [React] 컴포넌트 디자인

어제 배운 컴포넌트 디자인을 Sprint에 사용해보는 시간을 가졌습니다. 페어분이랑 대화코드가 잘 맞아서 이런저런 얘기들 많이했는데도 Bare Minimum Requirements 다 통과하고 Advanced 중간까지 풀었습니다. 내일마저 다 풀어보려구요!

그래서 오늘은 문제 풀면서 다시 한번 정리하고 싶었던 부분 위주로 정리해보려고 합니다👊

 

Modal 과 Pop-up의 차이

두 창 모두 특정 내용을 사용자에게 어필하고 싶을 떄 사용합니다.

공지사항, 주의사항, 안내문 등을 보여줄 때 자주 사용됩니다.

Modal

모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 겹쳐 보여주는 창을 말합니다.

기존 페이지와 부모-자식 관계를 가지기에 브라우저의 모달창은 제거하지 않고도 페이지를 이동하면 자동적으로 사라집니다.

Pop-Up

팝업창이란 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것을 말합니다. 

모달창과 달리 브라우저 옵션에 의해 영향을 받습니다.따라서 팝업창을 차단한 사용자는 팝업창을 볼 수 없습니다.

 

 

 

Controlled Components (제어 컴포넌트)

제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 합니다.

React에서는 변경할 수 있는 state 가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됩니다.

이러한 방식으로 React에 의해 값이 제어되는 입력폼 엘리먼트를 '제어 컴포넌트'라고 합니다.

 

참고로 제어 컴포넌트와 반대개념인 비제어 컴포넌트는 setState가 아닌 ref를 사용해서 값을 얻습니다.

제어 컴포넌트의 경우 사용자가 입력할 때마다 리렌더링을 발생시키는 반면, 비제어 컴포넌트는 사용자가 직접 하기 전까지는 리렌더링을 발생시키지도 않고 값을 동기화 시키지도 않습니다.

 

 

 

HTML entities

HTML 엔티티는 HTML에서 특정 캐릭터들이 예약되어있기 때문에 표기의 혼란을 막기 위해서 사용됩니다.