TIL

React

컴포넌트를 prop으로 넘겨 사용하기

import { AiOutlineHome, AiOutlineSetting } from "react-icons/ai";

function Icons() {
	const iconComponent = [
		{
			icon: AiOutlineHome,
      description: "홈",
    },
    {
		icon: AiOutlineSetting,
      description: "설정",
    },
  ];

	return (
		<Container>
		{iconComponent.map((component) => {
			return <Icon
				key={component.description}
				component={component.icon}
				description={component.description}
			/>
		})}
		</Container>
	)
}

import { AiOutlineHome, AiOutlineSetting } from "react-icons/ai";

function Icon({ Component, description }) {
	return (
		<Wrapper>
			<Component />
			<Span>{description}</Span>
		</Wrapper>
	)
}

예제에서는 react-icons 라이브러리에서 받아온 컴포넌트를 사용했지만,
직접 만든 컴포넌트나 styled 컴포넌트도 물론 사용할 수 있음 기억해두면 활용도가 높을듯!

CSS

overflow-y: auto; 설정 후 height 변화에 따라 비정상적으로 위치하는 컴포넌트 해결

문제상황: overflow를 설정한 div 영역 내에서 버튼을 감싼 div가 뷰의 height에 따라 위치가 계속 바뀌는 상황

구조 예시

return (
	<div style=>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>	// height에 관계 없이 정상 스크롤 이동
		<ButtonWrapper />	// height에 따라 말려 올라감
	</div>
)

해결 코드

return (
	<div style=>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<ButtonWrapper />	// ul 자식으로 이동
		</ul>
	</div>
)

ButtonWrapper를 ul 태그 자식으로 넣으니 움직임 없이 정상 작동이 된다.

height의 변화로 인해 ul 태그의 크기 영역과 ButtonWrapper의 크기 영역이 서로 겹쳐지면서 그로 인해 서로 밀어내 버튼들이 끌어 올려지듯 보이는 것 같다고 생각해서 이와 같이 해결했다.

마진이나 패딩 등 영향을 줄만한 스타일을 꼼꼼히 살펴보긴 했지만, 정확한 이유는 좀 더 경험이 쌓여야 알 수 있을듯..!

CSS

반응형 NavBar 구현하기 (미디어쿼리 심화)

인스타그램 웹 버전의 브레이크포인트에 따라 변경되는 반응형 컴포넌트들을 보고 웹 버전에서도 모바일과 같은 레이아웃을 유지하는 ecopercent 웹과도 잘 맞는다고 생각해서 오랫동안 TODO로 남겨둠

브레이크 포인트에 따라 각각 다른 컴포넌트를 구현하고 미디어 쿼리로 display:none; 를 적용할까 고민했지만,
막상 구현하려고 하니 새로운 div 추가 외에는 모두 CSS 수정만으로 구현할 수 있었음

이 때 미디어쿼리가 서로 중첩되지 않도록 조건을 잘 걸어줘야 해서 이 부분 범위 형태로 수정했다.

const media = {
  desktop: `(min-width: ${size.desktop})`,
  tabletMax: `(max-width: ${size.tabletMax})`,
  tabletMin: `(min-width: ${size.tabletMin})`,
  tabletSmallMax: `(max-width: ${size.tabletSmallMax})`,
  tabletSmallMin: `(min-width: ${size.tabletSmallMin})`,
  mobile: `(max-width: ${size.mobile})`,
};

const NavBar = styled.div`
  display: flex;
  height: 100%;

  @media ${media.mobile}, ${media.tabletSmallMin} and ${media.tabletSmallMax} {
    border-top: 0.5px solid;
  }
`

이와 같이 @media (min-width: 00px) and (max-width: 00px)로 범위를 설정해주었다.
min이나 max만 사용하는 경우 여러 미디어쿼리 범위에 해당되어 css 중첩이 발생해 원하지 않는 형태로 구현될 수 있다!

다른 방법으로는 기존의 미디어 쿼리 브레이크 포인트 변수에 + not @media (브레이크포인트)를 섞어서 사용하는 방식이 있다.