10.17.22 Daily log (React onClick 여러개 적용, 아이폰 노치 영역 css 대응)

[React] onClick 여러개 적용
ex)

<button onClick={ () => {
  onClickHandler() //function 1
  hideMenu() // function 2
}}>Sign out</button>

위와 같은 형식으로 작성

아이폰 노치 영역 css 대응
a. meta tag 추가

<meta name="viewport" content="initial-scale=1, viewport-fit=cover">

- viewport-fit 은 디스플레이를 위한 속성이다.
- 지정하지 않으면 기본값 (auto) 로 모든 콘텐츠를 볼 수 있도록 전체화면을 축소하여 보여준다.

b. safe-area-inset-* 추가

.text-area {
	padding-left: env(safe-area-inset-left);
}

- 해당 스타일 추가 시, 아이폰 상단의 노치 영역 값 만큼 패딩 값을 적용하게 된다.
- 원하는 위치에 따라 * 값을 지정해주면 된다.