[💻 코드스테이츠 FE 44기]custom-component 과제 - 2

✔️ 시작

어제 과제를 이어서 진행했다. 과제는 이미 어느 정도 마무리한 상태였고
스타일 수정하는데 집중했다.

📍 알게된 점

✔️event.stopPropagation() : 이벤트 버블링 막기

• 부모 컴포넌트에 이벤트 핸드러가 있을 때 자식 컴포넌트에 실행되지 않게 하는 방법
  onClick={(event) => event.stopPropagation()}를 추가해 준다.

return(
 {!isOpen
	? null
	: <ModalBackdrop onClick={openModalHandler}>
	<ModalView onClick={(event) => event.stopPropagation()}>
		<CloseBtn onClick={openModalHandler}>
			x
        </CloseBtn>
        "모달 창"
        </ModalView>
    </ModalBackdrop>
 }
)

ModalBackdrop, CloseBtn에 닫을 수 있는 코드를 작성했는데
ModalView 컴포넌트(흰색 창) 클릭 할 경우에도 닫히는 문제가 있었다.
이 부분을 ModalView 컴포넌트에 event.stopPropagation()추가해 해결해 주었다.

상태를 쉽게 변경해 줄려면

• 상태를 변경하기 위해 if문 등 작성할 수 있지만 !(논리 부정 연산자)를 사용해 코드를 간결하게 작성할 수 있다.

const [isOpen, setIsOpen] = useState(false);

const openModalHandler = () => {
//isOpen의 상태를 변경
	setIsOpen(!isOpen)
};

Styled Conponent 속성 추가하기

attrs()을 작성해 컴포넌트에 속성을 추가해 줄 수 있다.

• 객체형식으로 작성되는 거 같다.

const Inputst = styled.input.attrs({
	placeholder: "Hi!",
	value: "2"
})`

`;

✏️ 마치며

Styled Conponent 문법 몇 개는 이전 CSS, SCSS 등과 비슷 부분이 있어 많이 어렵지 않았다.

props를 사용해 스타일을 상속 받는 경우과
조건문을 이용해 상황에 따라 다르게 적용하는 경우가 중요한 거 같다.

이부분에 대해 좀 더 공부해야겠다.

요즘 이론으로만 공부하다 React로 과제를 진행하니 이게 뭐였지?
라는 생각을 자주 들었다.

무엇이든 자주 사용하지 않게 되면 금방 잊어버리게 되는 거 같다.
JavaScriptk, React 등의 문법을 잊지 않게 틈틈이 복습하는 시간을 가져야 겠다.