2022년 5월 3일

오늘 배운 내용 뿐만 아니라 position, grid, 상속 등 CSS 개념이 많았던 것으로 기억한다. 하지만 공부를 하면서 CSS는 모든 것을 다 외우기보다는 직접 실습하는 것이 제일 좋은 방법이라는 것을 깨달았다.😊

오늘 학습한 내용 중 떠오르는 단어

• flexbox, flex-grow, flex-shrink, flex-basis

단어를 조합해 오늘 배운 내용 설명

flexbox

• flexbox는 요소들을 유연하게 늘리거나 줄여서 레이아웃을 잡는 방법이다.

• 부모 요소에 flex를 적용해 자식 요소들의 정렬 방향과 크기를 결정한다.

• 부모 요소에 적용하는 속성과 자식 요소에 적용하는 속성이 있다.

• 부모 요소에 적용하는 속성은 flex-direction, flex-wrap, justify-content, align-items가 있다.

1. flex-direction

• flex-direction은 정렬 축을 정의하는 속성이다.

• flex-direction을 설정하면 자식 요소들을 정렬한다.

• flex-direction의 속성값은 row(행 방향), row-reverse(행 방향 역순), column(열 방향), column-reverse(열 방향 역순)이다.

• flex-direction의 기본값은 row이다.

• 자식 요소들은 자식 요소들의 컨텐츠가 가지는 width만큼 공간을 차지한다.

• 자식 요소들의 height는 컨테이너 요쇼(부모 요소)의 height만큼 늘어난다.

⭐️ 정리: flex-direction을 설정해주지 않으면
1. 기본값인 row(행 방향) 즉 가로 방향으로 배치되고
2. 자식 요소들이 가지는 컨텐츠의 width 만큼 공간을 차지하고
3. 부모 요소의 height만큼 height가 늘어난다.

2. flex-wrap

• flex-wrap은 한 줄에 모든 자식 요소들을 담을 수 없을 때 줄바꿈을 어떻게 할 것인지 정의하는 속성이다.

• flex-wrap의 기본값은 no-wrap이다. 즉 자식 요소들이 컨테이너의 width를 넘어서면 줄바꿈을 하지 않고 그대로 넘는다.

• flex-wrap의 속성값은 no-wrap(줄바꿈 하지 않음), wrap(줄바꿈), wrap-reverse(줄바꿈 역순)이다.

3. justify-content

• justify-content은 축의 수평 방향 정렬을 정의하는 속성이다.

• justify-content의 속성값은 flex-start, flex-end, center, space-between, space-around있다.

4. align-items

• align-items는 축의 수직 방향 정렬을 정의하는 속성이다.

• align-items의 속성값은 stretch, flex-start, flex-end, center, baseline이다.

grow, shrink, basis

• grow, shrink, basis는 자식 요소에 정의해주는 flex 속성이다.

• flex: grow, shrink, basis 순서를 지켜서 작성한다.

• 기본값은 flex: 0 1 auto이다. (grow, shrink, basis)

⭐️ grow, shrink, basis 간단 정리
1. grow : 자식 요소가 얼마나 늘어날 수 있는지
2. shrink : 자식 요소는 얼마나 줄어들 수 있는지
3. basis : 요소의 기본 크기는 얼마인지

✍️ 개인 학습

React 페이지 라우팅

• 페이지 라우팅이란 리액트에서 SPA를 개발할 때 사용하는 개념이다.

• 우선 라우팅이란 요청에 따라 데이터를 보여주는 경로 또는 보여주는 과정이라고 할 수 있다.

• 사용자의 페이지 요청 또는 페이지 이동 요청이 있을 경우 해당 페이지를 보여주는 경로 또는 과정이다.

• 리액트는 SPA 즉 싱글 페이지 애플리케이션을 개발할 수 있는 프레임워크다.

• SPA는 단일 페이지에서 요청된 화면을 보여준다.

• 이때 url 즉 경로에 따라 해당 경로에 있는 컴포넌트를 불러와 화면에 보여주게 된다.

• 리액트를 사용하면 요청이 들어올 때마다 하나의 페이지에서 필요한 컴포넌트만 불러와 렌더링할 수 있게 된다.

• 이렇게 서버와의 요청 및 응답 없이 웹브라우저에서 필요한 컴포넌트만 업데이트하는 방식을 CSR이라고 한다.

• 리액트에서는 react-router라는 라이브러리를 사용해 컴포넌트 별로 url을 지정함으로써 페이지 라우팅이 가능하다.

react-router

• 리액트에서 페이지 라우팅을 적용할 수 있도록 하는 라이브러리다.

• react-router 웹사이트 및 공식 문서를 통해 설치 방법과 API reference를 확인할 수 있다.

• 6버전 기준 가장 기본적으로 사용할 수 있는 인터페이스(쉽게 말해 기능)는 <Route>, <Routes>, <Link>이다.

• <Routes>는 마치 부모 요소처럼<Route>를 감싸는 역할을 한다.

• <Route>는 url에 매칭되는 컴포넌트를 렌더링하는 역할을 한다.

• 마치 if문처럼, 어떤 url이 요청되면 어떤 컴포넌트를 반환하겠다는 의미다.

		<Routes>
          <Route path="/" element={<Home />}/> //이 path를 요청하면 Home을 렌더링하겠다!
          <Route path="new" element={<New />}/> //이 path를 요청하면 New를 렌더링하겠다!
          <Route path="edit" element={<Edit />}/> //이 path를 요청하면 Edit을 렌더링하겠다!
          <Route path="diary" element={<Diary />}/> //이 path를 요청하면 Diary를 렌더링하겠다!
        </Routes>

• 는 사용자가 요소를 클릭했을 때 다른 페이지로 이동할 수 있도록 한다.

• 기본적인 사용 방법 이외에도 path variables, query string, page moving을 가능하게 하는 기능들을 사용할 수 있다.