리액트를 이용해서 장고의 템플릿을 대체하기이번 포스팅에서 다룰 것은 리액트와 장고를 연결하는 것입니다. 장고의 템플릿 부분을 리액트로 대체하는 것이죠. 보통 이럴 경우 리액트 프로젝트를 eject 해서 바벨의 설정을 건드리지만 이 포스팅에서는 eject를 하지 않고 둘을 연결 시킨다음에 Oneline이라는 앱을 만들어 보려고 합니다. 우선 eject를 하지 않는 이유는 리액트의 경우 이제 eject를 하지 않아도 sass를 적용시킬 수가 있습니다.(파일의 이름을 App.module.scss와 같은 형태로 바꿔주면 css 모듈과 sass가 둘다 적용됩니다.) 그래서 더더욱 꼭 eject를 할 필요가 있나 싶은 마음에 이번 포스팅을 준비했습니다. 우리가 만들 Oneline이라는 앱은 간단하게 쓴 글을 나타내..
리액트에서 데이터를 전달하는 방법리액트에서 데이터를 전달할 때는 props를 통해서 부모가 자식에게 전달하는 방법이 가장 간단하고 쉽습니다. 가령 부모 컴포넌트의 state에 {name:react, company:facebook}이라는 값이 있다면 자식 컴포넌트에서 props.name과 props.company로 받는 형태입니다. 코드로 보니 좀 더 이해가 가시나요? 일반적으로 데이터를 전달하는 방법은 이렇습니다. 하지만 이럴경우 여러 단계를 거쳐야만 하는 경우가 생깁니다. 주황색 부모 컴포넌트에서 맨 밑에 있는 주황색 자식 컴포넌트에 값을 전달하려고 하면 어떻게 해야할까요? 중간에 컴포넌트들을 통해서 계속 값을 전달해야하만 주황색 자식 컴포넌트에 값을 전달할 수 있습니다. 저것보다 더 복잡한 형태라면 ..
프론트엔드의 프레임워크빠르게 개발하기 위해서는 프레임워크를 사용하는 것이 아주 좋습니다. 프론트엔드 개발 쪽의 프레임워크들은 디자인적으로 어느정도 완성된 것들을 제공해준다는 특성이 있습니다. 즉 예쁜 텍스트 창을 미리 만들어 놓고 제가 몇몇의 세부사항은 넣으면 그 세부사항에 맞게 예쁜 텍스트 창을 제공해주는 것입니다. 그리고 반응형 웹 애플리케이션도 또한 쉽게 만들 수 있도록 해줍니다. 프론트엔드 개발 쪽의 프레임워크는 레이아웃을 잡는 기능도 제공해주기 때문입니다. 가장 많이 사용하면서 유명한 프론트엔드 쪽의 프레임워크는 트위터의 부트스트랩이 있습니다.리액트의 프레임워크 게슈탈트게슈탈트는 핀터레스트에서 만든 프레임워크입니다. 핀터레스트의 깔끔한 디자인을 담은 UI를 이용할 수 있다는 점이 매우 좋습니다...
Array.prototype.map() 란?map은 배열 내의 모든 요소 각각에 대하여 제공된 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환하는 메소드입니다. 우리가 가져온 프로필 정보를 map 메소드를 통해서 컴포넌트에 다 전달해보도록 하겠습니다.map 메소드의 매개변수map 메소드는 현재 값, 인덱스(현재 처리되는 요소의 배열 내 인덱스), 본래 배열의 순서로 매개변수 값을 가집니다. 위의 예시를 보면 nums라는 배열에 1~5까지의 숫자가 들어있고, map을 통해서 인덱스를 곱한 새로운 배열을 만들어 냈습니다. 인덱스는 0부터 시작하니 [0, 2, 6, 12, 20]이라는 배열을 가지게 됩니다.renderProfile 함수 만들기map 메소드를 통해서 우리가 가져온 프로필들을 전달 받은 컴..
컴포넌트에 데이터를 넣는 방법저번 포스팅을 통해서 우리는 여러 프로필을 불러왔습니다. 이제는 불러온 그 프로필들을 우리가 비워두었던 state에 넣고 그 값을 또 만들어두었던 컴포넌트에 전달하면 됩니다. 값들은 배열이고 우리는 그 배열을 어떻게 넣을 수 있을까요? this.state.profiles = "우리가 가져온 프로필 배열" 의 형태로 넣으면 될까요 ? this.state.키 = "값"의 형태로 직접 데이터를 삽입하면 안됩니다. this.setState 함수의 이용state에 값을 넣으려면 반드시 this.setState 함수를 이용해야 합니다. 리액트의 경우 state의 변화가 일어나면 다시 render 함수가 실행되고 바뀐 값 부분을 넣습니다. 하지만 이러한 리액트의 기능을 이용하려면 stat..
작업의 순서를 정해봅시다.우선은 자식 컴포넌트들을 만든 다음에 api를 통해 정보를 불러오고 우리가 임의로 입력한 값들을 대체 하도록 하겠습니다. 일단 profile.js를 만들었으니 그 안에 필요한 코드들을 추가해 보도록 하겠습니다. 자식 컴포넌트 만들기const로 사용할 컴포넌트를 선언했습니다. 매개변수로 전달한 값은 { imgSrc, name, username, password } 입니다. 보통은 props라는 값을 많이 전달합니다만 저는 props라고 적는 대신에 이 객체를 구조분해해서 값을 받고 있습니다. 컴포넌트에 전달한 인수 값을 구조분해를 사용하든, props를 사용하든 기호에 맞게 사용하시면 됩니다. props를 매개변수로 전달하셨다면 컴포넌트에서 사용하는 값들이 {name}, {user..
리액트를 배워봅시다. 리액트는 페이스북에서 만든 UI 라이브러리입니다. 데이터가 바뀌었을 때만 인식해서 바뀐 부분만 처리해준다면 얼마나 간편하고 빨라질까요? 그리고 라이브러리이기때문에 여러 기술과 함께 쓸 수 있습니다. 리액트를 배우면서 많은 개념들을 만나게 됩니다. 같이 쉬운 예제를 통해서 하나하나씩 배워보도록 하겠습니다.리액트 설치하기create-react-app이라는 것이 있습니다. create-react-app github 바로가기 보통 cra라고 표현하는데요. 이것을 이용하면 귀찮은 것들 없이 간단하게 리액트 환경을 만들어줍니다. 해당 모듈을 다운로드 받으려면 npm을 다운로드 하셔야 합니다. npm은 node.js를 다운받으면 자동으로 다운받아집니다. node.js 다운로드 받으러 가기 LTS..