리액트스트랩 레이아웃 잡기

리액트(부트)스트랩의 가장 큰 특징은 "모바일 우선" 이라는 것입니다.

공식 홈페이지에 레이아웃에 보면 큰 설명은 안 되어있지만 대략 레이아웃을 잡는데 Container, Row, Col 컴포넌트를 이용하면 된다고 나와있습니다.

레이아웃 문서 확인하기

Container 컴포넌트를 쓴다면 전체를 감싸는데 사용할 것이고, 중요한 것은 Row와 Col 컴포넌트 입니다. Row는 줄을 나누는 것이고, Col이 그 안에서 공간을 나눕니다.

	render() {
	return (
	<Container fluid>
	<Row>
	<Col className="item">col</Col>
	<Col className="item">col</Col>
	<Col className="item">col</Col>
	</Row>
	</Container>
	);
	}

view raw App.js hosted with ❤ by GitHub

위와 같은 코드가 있다면 아래와 같이 나타납니다.

Row와 Col

정확히 3등분으로 나눠지게 됩니다. 즉 다른 코드를 추가하지 않는다면 Row 컴포넌트 안에 Col 컴포넌트의 개수만큼 나눠진다는 것이죠. 너비가 달라져도 똑같은 크기를 가지게 됩니다.

크기 다르게 주기

리액트스트랩과 부트스트랩은 주어진 공간을 12개로 나눕니다. Col의 크기를 이에 맞게 줄 수 있습니다. 즉 하나는 주어진 공간에서 6/12을 차지하고, 나머지 둘은 3/12씩 차지할 수 있게 줄 수 있는 것이죠.

그리고 화면 크기에 따라서도 공간을 쉽게 적용시킬 수 있습니다.

화면의 크기는 xs, sm, md, lg, xl 순으로 구성됩니다. 거기에 차지할 공간만큼의 숫자를 넣어주면 되는 것이죠. 설명이 너무 길었나요?

	render() {
	return (
	<Container>
	<Row>
	<Col className="item" md="6">
	col
	</Col>
	<Col className="item" md="3">
	col
	</Col>
	<Col className="item" md="3">
	col
	</Col>
	</Row>
	</Container>
	);
	}

view raw App.js hosted with ❤ by GitHub

해당 코드를 작성하면 md 크기 부터는 6:3:3의 비율로 만들어집니다. "모바일 우선"이라는 말은 이때 중요합니다. 저렇게 공간을 지정해주면 모바일(xs)에서는 각 칸이 12개로 나타나다가, 지정한 크기부터(위의 경우엔 md) 해당 비율로 공간을 가지게 됩니다. 이 점만 주의하면 레이아웃을 짜는 일은 그렇게 어렵지 않습니다.

왜 12일까요?

보통 프론트엔드 웹 프레임워크의 경우 저렇게 공간을 줄 수 있다면 12로 된 것들이 많습니다. 왜 12일까요? 그건 12라는 숫자가 그 주위의 숫자들에 비해 똑같이 나눠지는 수가 많기 때문입니다. 1개씩 이라면 12, 2개씩 이라면 6, 3개씩 이라면 4, 4개씩 이라면 3, 6개씩 이라면 2개, 12라면 1개로 사용할 수 있죠. 똑같은 비율로 나눠질수록 레이아웃 공간을 나누는 것이 더 쉬워지게 됩니다. 그래서 12라는 숫자를 사용하는 것이죠.