보다 나은 내일, 다이어리

마이페이지, 네트워크, 로그아웃 세개의 메뉴를 우측 끝으로 이동시키고 싶었다..

react-bootstrap은 보통 container, Col, Row, Stack 4개의 컴포넌트로 레이아웃을 잡는 편이다.

그런데 Nav 같이 이미 자체적으로 layout이 잡혀져 있는 것도 있다!

1. px-3
   1. padding-right, padding-left, Nav 전체적으로 내부 자식에게 간격을 주기 위함
2. ms-auto
   1. margin-left: auto 를 의미함. auto 는 부모의 여백공간만큼을 왼쪽으로 밀어내는 느낌이다, 자주 쓰이는 속성이니 숙지하기!
   2. Nav.item 태그 3개를 Nav 태그 하나로 묶어서 덩어리때 내려가게 한다.

결국 display: flex;를 사용했는데 , CSS 레이아웃을 잡을 땐 flex를 많이 사용하므로 알아두는 게 좋다.

flex 를 공부하기 좋은 사이트 → 개구리 꽤나 귀여워  Flexbox Froggy

const navigationInformations = [
  { title: '마이페이지', link: '/' },
  { title: '네트워크', link: '/network' },
];


<div
    style={{
    backgroundColor: '#D9DDFF',
    display: 'flex',
    alignItems: 'center',
    padding: '34px 56px',
    }}
>
    <div style={{ fontSize: '2em' }}>MY PORTFOLIO</div>
    <ul
        style={{
            margin: '0 0 0 auto',
            listStyleType: 'none',
            padding: 0,
            display: 'flex',
            gap: 30,
            padding: 0,
        }}
    >
    {navigationInformations.map((navigationItem) => (
        <li
            onClick={() => {
                navigate(navigationItem.link);
        	}}
            style={{
                borderRadius: '10px',
                padding: '6px 14px',
                backgroundColor: '#989CFD',
                color: 'white',
            }}
        	key={navigationItem.title}
        >
        {navigationItem.title}
        </li>
    ))}
    </ul>
</div>

몇몇 태그는 내장된 고유 기능이 있다.

form 태그는 submit될 시에 페이지를 새로 고침을 한다.

이런 것들을 방지하기 위해 e.preventDefault()를 사용한다.

e.stopPropagation() 은 이벤트 버블링과 관련.

html 태그 안에서 자식에게 이벤트가 발생하면 특정 함수가 발생되도록 이벤트 핸들러를 심어놓는다.

ex) onClick = {() => console.log('hi')}

그러면 이벤트가 발생한 자식을 기점으로 부모에서부터 위로 존재하는 모든 태그의 끝까지 순차적으로 이벤트 핸들러가 동작한다.

이것을 막기 위해 e.stopPropagation() 을 사용한다.

하지만 이벤트 버블링을 막아야 할 상황은 거의 없다고 하기 때문에 e.stopPropagation() 의 사용은 권장하지 않는다.

• focus 이벤트와 같이 몇몇 이벤트를 제외하곤 거의 모든 이벤트는 버블링된다.
• this (event.currentTarget) : 현재요소 <form> 요소에 있는 핸들러가 동작했으므로 <form> 요소를 가리킴
• event.target - 폼 안쪽에 실제 클릭한 요소를 가리킴
• 꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!
  • 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있다.
  • 핸들러의 event 객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게 하면, 아래쪽에서 무슨 일이 일어나는지를 부모요소의 핸들러에게 전달할 수 있으므로,
  • 위와 같은 방법으로도 이벤트 버블링을 통제할 수 있습니다!

[개념잡기] e.preventDefault() 와 stopPropagation() 의 차이

버블링과 캡처링