리액트(부트)스트랩의 가장 큰 특징은 "모바일 우선" 이라는 것입니다.공식 홈페이지에 레이아웃에 보면 큰 설명은 안 되어있지만 대략 레이아웃을 잡는데 Container, Row, Col 컴포넌트를 이용하면 된다고 나와있습니다. 레이아웃 문서 확인하기 Container 컴포넌트를 쓴다면 전체를 감싸는데 사용할 것이고, 중요한 것은 Row와 Col 컴포넌트 입니다. Row는 줄을 나누는 것이고, Col이 그 안에서 공간을 나눕니다. 위와 같은 코드가 있다면 아래와 같이 나타납니다. 정확히 3등분으로 나눠지게 됩니다. 즉 다른 코드를 추가하지 않는다면 Row 컴포넌트 안에 Col 컴포넌트의 개수만큼 나눠진다는 것이죠. 너비가 달라져도 똑같은 크기를 가지게 됩니다.크기 다르게 주기리액트스트랩과 부트스트랩은 주어..
가장 유명한 프론트엔드 웹 프레임워크인 부트스트랩을 아시나요?트위터 부트스트랩은 가장 유명한 프론트엔드 웹 프레임워크입니다. 아주 깔끔하면서 트위터에서 사용할 만한 디자인으로 쉽게 웹 페이지를 꾸밀 수 있게 해줍니다. 리액트스트랩은 부트스트랩의 리액트 버전입니다. 튜토리얼을 통해서 간단하게 리액트스트랩(과 부트스트랩)을 다루는 방법을 배워보도록 하겠습니다. 다운로드 하기우선은 create-react-app으로 리액트 환경을 만들어보도록 하겠습니다. npx create-react-app 프로젝트명 해당 명령어로 프로젝트를 만들어주세요. 이제 생성한 프로젝트로 가서 리액트스트랩과 부트스트랩을 다운로드 받아주시면 됩니다. yarn add bootstrap reactstrap 부트스트랩까지 다운로드 받는 이유는..