컴포넌트를 확장해봅시다.저번 포스팅에서는 컴포넌트를 어떻게 만드는 지에 대해서 알아봤습니다. 이번 포스팅에서는 컴포넌트를 확장시켜보겠습니다. 버튼을 만들고 그 버튼을 토대로 모서리가 둥근 버튼을 만들었습니다. 이미 있는 css 효과를 넣으면 기존 css 값이 수정되며 새로운 css 효과를 선언하면 새로운 값이 적용되서 컴포넌트가 만들어집니다. 기존의 만든 스타일 컴포넌트를 다른 태그로 이용할 수도 있습니다. 컴포넌트에 as라는 속성을 주고 값으로 제가 사용할 태그를 넣어주면 됩니다. 그럼 버튼 컴포넌트를 a태그로 사용할 수 있습니다. 지금 코드는 styled component v4에 적용된 코드이고, 따로 v4를 다운로드 받지 않았다면 아래의 코드를 사용하셔야 됩니다. const AnchorButton ..
스타일 컴포넌트는 무엇이고 또 왜 사용할까?스타일 컴포넌트는 스타일이 포함된 리액트 컴포넌트를 만드는 것이라고 생각하면 됩니다. 아주 직관적인 이름을 지었다고 생각이 되네요. 이렇게 스타일이 포함된 컴포넌트를 만들면 무슨 장점이 있을까요? 당연히 css나 scss파일을 만들 필요가 없습니다. 왜냐하면 스타일이 포함되어 있기 때문입니다. 그러므로 className을 고민할 필요도 없고, 모든 것을 자바스크립트로 해결할 수 있다는 장점이 있습니다.한 번 이용해봅시다.설치하는 방법은 언제나 그렇듯 간단합니다. yarn add styled-components 또는 npm install --save styled-components 설치가 완료되었다면 한번 컴포넌트를 만들어 보겠습니다. Wrapper라는 검은색 모..
배운 것들을 활용하면 그럴싸한 예제를 만들어 볼 수 있습니다.예제로 다뤘던 것들을 생각해봅시다. 프로필 생성기도 만들었고, 게슈탈트도 다뤄봤습니다. 리액트 16에 새로 추가된 Fragment도 알고 있습니다. 이러한 것들을 이용하면 context에 대해서 그럴싸한 예제를 만들어 낼 수 있습니다. 콘텍스트 예제 바로가기 컴포넌트는 게슈탈트를 이용했습니다. 수락 버튼을 누르면 "님과 친구가 되었습니다"라는 멘트로 바뀌고 맨 위에 사람 옆의 숫자가 올라갑니다. 취소를 누르면 숫자가 다시 줄어들고 "님이 친구요청을 했습니다"라고 바뀌게됩니다. 제 코드도 공유해드릴테니 비슷하게 만들어보셔도 되고, 참고해서 따로 다른 형태라도 만들어보세요~예제 만들기우선은 콘텍스트를 만들어야 합니다. 저는 리덕스와 최대한 비슷한 ..
리액트에서 데이터를 전달하는 방법리액트에서 데이터를 전달할 때는 props를 통해서 부모가 자식에게 전달하는 방법이 가장 간단하고 쉽습니다. 가령 부모 컴포넌트의 state에 {name:react, company:facebook}이라는 값이 있다면 자식 컴포넌트에서 props.name과 props.company로 받는 형태입니다. 코드로 보니 좀 더 이해가 가시나요? 일반적으로 데이터를 전달하는 방법은 이렇습니다. 하지만 이럴경우 여러 단계를 거쳐야만 하는 경우가 생깁니다. 주황색 부모 컴포넌트에서 맨 밑에 있는 주황색 자식 컴포넌트에 값을 전달하려고 하면 어떻게 해야할까요? 중간에 컴포넌트들을 통해서 계속 값을 전달해야하만 주황색 자식 컴포넌트에 값을 전달할 수 있습니다. 저것보다 더 복잡한 형태라면 ..
리액트를 렌더할 때 주의사항리액트의 경우엔 컴포넌트들을 만들어서 그것들을 재사용합니다. 이러한 방식때문에 여러 컴포넌트들이 같이 렌더링됩니다. 이때 주의해야할 사항은 전체가 하나로 감싸져야 한다는 것입니다. 해당 코드를 실행하면 두개의 div를 하나로 감싸지 않았기 때문에 에러가 납니다. Adjacent JSX elements must be wrapped in an enclosing tag 이런 상황에서 저 두개의 div를 하나의 div나 span으로 감싸는 것이 최선의 방법이었습니다. 하지만 그럴 경우 불필요한 태그가 생기게 되는 한계점이 있었습니다. 이제는 이런 상황에서 Fragment를 이용하면 됩니다.리액트16의 Fragment 위의 코드처럼 Fragment로 감싸면 에러가 나지 않고 렌더링 되는..
작은 이미지 컴포넌트와 긴 이미지 컴포넌트 만들기레이아웃과 제목 부분은 만들었으니 이제는 이미지를 넣을 컴포넌트들을 만들어야 합니다. SmallImage 컴포넌트와 LongImage 컴포넌트라고 하고 코드를 작성해보겠습니다. Long Image 컴포넌트와 Small Image 컴포넌트는 너비와 높이 빼고는 코드가 똑같아서 같이 하나의 컴포넌트로 구성해도 상관없지만 분리하는게 좀 더 단순하게 느껴질 것 같아서 따로 작성했습니다. 게슈탈트의 Box와 Image를 통해서 만들었고, 부모 컴포넌트로 부터 alt값과 src 값을 받아옵니다. 그래서 매개변수로 props를 주고 alt에는 {props.alt}, src에는 {props.src}를 전달했습니다. 컴포넌트를 만들었으니 이제 컴포넌트 안에 넣을 값들을 구..
레이아웃이란?공간 안에 어떻게 배치, 배열 할지를 정하는 것을 레이아웃이라고 합니다. 우선적으로 만들기 전에 어떤 식으로 레이아웃을 잡을지를 정해야 게슈탈트를 이용해서 만드는데 효율적입니다. 이렇게 짠 후에는 어떻게 해야할까요?박스와 컬럼게슈탈트에는 레이아웃을 잡는 방법이 2가지 있습니다. Box와 Column입니다. Box에는 column이라는 속성이 있습니다. 0~12의 값을 넣으면 됩니다. Column에는 span이라는 속성이 있고 똑같이 여기에 0~12사이의 값을 넣으면 됩니다. 직관적으로 생각하시면 편합니다. 전체 차지하는 부분중에서 12는 전체를, 1은 1/12를 뜻합니다. 가져야 하는 공간안에서 숫자만큼의 넓이를 가집니다. 박스와 플렉스박스Box 컴포넌트에는 Column이라는 속성도 있지만 ..
프론트엔드의 프레임워크빠르게 개발하기 위해서는 프레임워크를 사용하는 것이 아주 좋습니다. 프론트엔드 개발 쪽의 프레임워크들은 디자인적으로 어느정도 완성된 것들을 제공해준다는 특성이 있습니다. 즉 예쁜 텍스트 창을 미리 만들어 놓고 제가 몇몇의 세부사항은 넣으면 그 세부사항에 맞게 예쁜 텍스트 창을 제공해주는 것입니다. 그리고 반응형 웹 애플리케이션도 또한 쉽게 만들 수 있도록 해줍니다. 프론트엔드 개발 쪽의 프레임워크는 레이아웃을 잡는 기능도 제공해주기 때문입니다. 가장 많이 사용하면서 유명한 프론트엔드 쪽의 프레임워크는 트위터의 부트스트랩이 있습니다.리액트의 프레임워크 게슈탈트게슈탈트는 핀터레스트에서 만든 프레임워크입니다. 핀터레스트의 깔끔한 디자인을 담은 UI를 이용할 수 있다는 점이 매우 좋습니다...
깃허브 페이지란?깃허브는 가장 인기있는 오픈소스 저장소입니다. 이러한 깃허브에서 제공하는 깃허브 페이지는 html, css, javascript로 구성된 정적 페이지를 무료로 호스팅할 수 있게 만들어줍니다. 우리는 함께 만들었던 리액트 페이지를 깃허브 페이지에 올려보도록 하겠습니다. 깃허브에 저장소 만들고 README.md 추가하기우선 우리 디렉토리에서 REAMD.md를 만들어보도록 하겠습니다. create-react-app을 통해서 만들면 README.md라는 파일이 존재하는데 이 안에는 리액트의 설명이 들어가 있습니다. 그래서 지우고 우리 앱에 대한 설명을 넣도록 하겠습니다. 저는 간단하게 위 처럼 만들었습니다. # 하나는 h1 태그와 같습니다. #이 증가할수록 제목태그의 숫자도 커지는 셈입니다. 저..
프로필 로딩화면 만들기일부러 2~3초 정도 늦게 프로필을 불러오고 로딩화면을 보여주면 더 그럴듯해보이기 때문에 일부러 로딩화면을 만들었습니다. 자바스크립트에는 해당 밀리세컨드 다음에 함수를 실행하는 setTimeout이라는 함수가 있습니다. 그래서 componentDidMount에서 3초 후에 프로필을 렌더하는 함수를 불러오도록 했습니다. 그리고 프로필이 있냐 없냐에 따라서 클래스 네임과 값을 다르게 주었습니다. 페이스북 같은 느낌을 내기 위해 배경색은 "#3B5998"을 사용했습니다. 해당 css 코드까지 다 붙여넣고 새로고침을 눌러보세요. 3초가 지나면 프로필을 불러오기 때문에 프로필이 있는 화면으로 바뀌게 됩니다.프로필 렌더링 화면 만들기이제 프로필들을 깔끔하게 보여지도록 해보겠습니다. 다 flex..