리액트(부트)스트랩의 가장 큰 특징은 "모바일 우선" 이라는 것입니다.공식 홈페이지에 레이아웃에 보면 큰 설명은 안 되어있지만 대략 레이아웃을 잡는데 Container, Row, Col 컴포넌트를 이용하면 된다고 나와있습니다. 레이아웃 문서 확인하기 Container 컴포넌트를 쓴다면 전체를 감싸는데 사용할 것이고, 중요한 것은 Row와 Col 컴포넌트 입니다. Row는 줄을 나누는 것이고, Col이 그 안에서 공간을 나눕니다. 위와 같은 코드가 있다면 아래와 같이 나타납니다. 정확히 3등분으로 나눠지게 됩니다. 즉 다른 코드를 추가하지 않는다면 Row 컴포넌트 안에 Col 컴포넌트의 개수만큼 나눠진다는 것이죠. 너비가 달라져도 똑같은 크기를 가지게 됩니다.크기 다르게 주기리액트스트랩과 부트스트랩은 주어..
가장 유명한 프론트엔드 웹 프레임워크인 부트스트랩을 아시나요?트위터 부트스트랩은 가장 유명한 프론트엔드 웹 프레임워크입니다. 아주 깔끔하면서 트위터에서 사용할 만한 디자인으로 쉽게 웹 페이지를 꾸밀 수 있게 해줍니다. 리액트스트랩은 부트스트랩의 리액트 버전입니다. 튜토리얼을 통해서 간단하게 리액트스트랩(과 부트스트랩)을 다루는 방법을 배워보도록 하겠습니다. 다운로드 하기우선은 create-react-app으로 리액트 환경을 만들어보도록 하겠습니다. npx create-react-app 프로젝트명 해당 명령어로 프로젝트를 만들어주세요. 이제 생성한 프로젝트로 가서 리액트스트랩과 부트스트랩을 다운로드 받아주시면 됩니다. yarn add bootstrap reactstrap 부트스트랩까지 다운로드 받는 이유는..
expo를 이용해봅시다.직접 react-native도 다운로드하고, 필요한 것들도 따라서 다운로드 해서 초기 환경을 세팅할 수도 있지만, expo를 이용하면 간단하게 리액트 네이티브 초기환경을 세팅할 수 있습니다. 또한 expo에서 제공해주는 여러 편리한 기능들이 있는데, 아마 가장 많이 사용하는 것이 아이콘 관련 기능일 것이고, 또 많이 사용하는 것이 다 만들고 나서 build할 때 그냥 간편하게 할 수 있다는 것이라고 생각합니다. expo에서 제공해주는 icon 보러가기 이처럼 해당 아이콘들을 간편하게 불러와서 사용할 수도 있고, 또 색을 넣을 때라던가 사용자가 이미지와 같은 리소스들을 다 불러올 때까지 앱로딩 화면을 보여주는 등의 기능도 있기 때문에 expo를 이용하는 것이 여러모로 이점이 많습니다..
Route에 path 속성에 아무것도 전달하지 않으면 어떻게 될까요?switch를 알아보기 우선은 Route에 path 속성 값을 전달하지 않으면 어떻게 되는지 부터 알아봅시다. 해당 예시에는 3개의 라우트가 있고, 맨 마지막 라우트에는 path 속성을 전달하지 않았습니다. 결과는 "localhost:3000/"에 접속하니 path 값이 "/"인 Home 컴포넌트와 path 값이 없는 NotFound 컴포넌트가 둘 다 보이는 군요. 즉 path를 전달하지 않으면 어떤 요청에도 항상 나타나게 됩니다. "localhost:3000/about"에 접속하면 우리가 설정한 세 개의 컴포넌트가 다 보이게 됩니다. 이럴 때 스위치를 사용하시면 됩니다.switch 사용해보기스위치는 라우터들을 묶은 다음, 가장 먼저 p..
match와 location을 알아보도록 하겠습니다.BrowserRouter와 우리의 App을 연결하면 어떻게 된다고 했었나요? 라우터가 history api에 접근할 수 있고, Route에 연결된 컴포넌트에 match와 location, history props를 전달합니다. 이번 포스팅에서는 match와 location에 대해서 알아보고 path와 querystring을 받아오도록 하겠습니다. 이전 예시에 위의 코드를 복사해서 붙여넣어주세요. 라우트가 하나이고, "/"에 연결되어 있기 때문에 앱을 실행하면 크게 Home이라는 글자가 적힌 것을 볼 수 있습니다. 페이지가 에러없이 작동되면 F12를 눌러 구글 개발자 모드를 실행하고 콘솔 창을 확인해주세요. 우선은 나온 값들을 하나하나씩 알아보도록 하겠습..
리액트 라우터를 배워봅시다.라우팅이란 무엇일까요? 간단히 설명하자면 우리의 요청(url)에 맞게 연결해주는 것이라고 생각해주시면 됩니다. 우리는 url을 통해서 어떤 요청을 할까요? 우선 url이 어떤 형태인 지를 보겠습니다. 구글에 리액트 라우터라고 검색했을 때 url의 형태입니다. 파란부분(https)는 프로토콜입니다. 그리고 주황색 부분(www.google.co.kr)은 호스트 네임이라고 합니다. 중요한 건 호스트 네임 뒷부분에 있는 것들입니다. 초록색 부분(search)는 path name이라고 하고 "?"뒤에 있는 부분은 쿼리스트링(querystring)이라고 합니다. 또 페이지 내에서 위치를 표시할 때는 # 형태로 url이 좀 더 추가되기도 하는데 이 부분은 hash라고 표현합니다. 이렇게 용..
먼저 다운로드 해야할 것들이 있습니다.저번 시간에 만든 버튼 앱에 리덕스를 적용시키려면 우선 다운 받아야할 것들이 있습니다. yarn add redux react-redux 해당 명령어를 콘솔에서 실행시켜주세요. redux와 react-redux를 다운받을 수 있습니다.해당 모듈들을 다운로드 했다면 이제 리덕스 폴더를 만들어보도록 하겠습니다. src/reducers/index.js 파일을 만들어주세요. 예제에서는 리듀서를 하나로 사용하지만 프로젝트가 커지면 여러개의 리듀서를 사용하고 하나로 통합하는 경우도 있습니다. 예제는 간단한 것이 좋으므로 reducers 폴더 안에 index에 모든 것을 다 정의해보도록 하겠습니다.액션 만들기먼저 정의해야할 것은 액션입니다. 액션은 어떤 행동을 할 지 정의해주는 것..
리액트의 데이터 흐름은 어떻게 진행되나요?리액트는 부모에서 자식으로 데이터가 흘러갑니다. 그래서 주황색(부모)에서 주황색(자식) 까지 데이터가 전달되려면 그 사이의 많은 컴포넌트들을 거쳐가게 됩니다. 이런 거쳐가는 과정이 많아질수록 코드가 늘어나고 복잡해집니다. 리액트 카테고리에서 이전에 다뤘던 콘텍스트가 중간을 거치지 않고 자식 컴포넌트에 바로 전달했듯이 리덕스도 똑같다고 생각하시면 됩니다.왜 리덕스를 알아야 할까요?리덕스를 다룰 수 있게 되면 어려운 프로그램을 쉽게 만들 수 있습니다. 여러 과정을 거치지 않고, 사용할 컴포넌트에 연결해서 사용하면 되기 때문입니다. 이처럼 좀 더 프로그램을 쉽게 작성하기 위한 것이 첫번째 이유고, 두번째 이유는 리덕스라는 것이 이제는 보편적인 개념이 되었기 때문입니다...
ref의 역할은 무엇일까요?특정 엘리먼트를 사용해야 할 때 우리는 그 엘리먼트에 아이디를 주고, 그 아이디를 통해서 해당 엘리먼트를 사용합니다. jsx를 통해서 엘리먼트에 아이디 값을 주면 어떻게 될까요? 리액트 컴포넌트의 경우 여러번 사용될 수 있습니다. 그래서 jsx를 통해서 전달된 아이디를 가진 엘리먼트들이 재사용된 만큼 나타나게 됩니다. 즉 동일 아이디를 가진 엘리먼트들이 생기게 되는 것이죠. 그래서 리액트 컴포넌트에서는 아이디값을 주지 않고, className으로 클래스 값만 주는 것입니다. 아이디는 없지만 특정 엘리먼트를 지정해야할 때 사용하는 것이 ref입니다. 리액트에서 엘리먼트나 컴포넌트의 id 역할을 하는 것이 ref(reference) 입니다. ref 사용해보기버튼을 누르고 난 뒤에 ..
sass란 무엇일까요?완벽한 언어란 없습니다. 계속해서 수정해나가면서 점점 괜찮아지는 수 밖에 없죠. css란 언어도 그렇습니다. 웹페이지를 꾸밀 때 당연히 사용해야할 언어이지만 한계가 많은 언어입니다. 여러 선택자를 통해 효과를 주다보면 금방 코드의 양이 늘어나고 코드의 양이 늘어나면 그에 따라서 또 복잡해집니다. 이에 여러가지 해결책들이 생겼고, sass도 그 해결책 중의 하나라고 생각하시면 됩니다. sass는 기초 언어에 힘과 우아함을 더해주는 css의 확장이다. 위의 말에도 나와 있듯이 css에서의 한계점들을 sass는 여러가지 기능들을 추가해서 해결하려고 하죠.리액트 프로젝트에 sass를 설정해봅시다.예전에는 yarn eject 명령어를 통해서 웹팩 설정을 해줬어야 하지만 이제는 간단하게 sas..