css module이란?css은 모듈은 css를 전역적이지 않고 지역적으로 사용할 수 있게 만들어 줍니다. 가령 클래스 이름이 "App_app__1JlHe" 와 비슷한 형태로 되어 있는 것들을 본 적이 있으신가요? 이런 이름으로 되어 있는 것이 css module이 적용되어 있는 것입니다. App은 파일의 이름이고, app은 클래스네임, 그리고 1JlHe은 랜덤으로 생성된 해쉬입니다. 이처럼 지역적으로 바꿔주면서 이름도 절대 안겹치도록 바꿔주기 때문에 많이 사용합니다. 간단히 말하면 css 파일에 .big이라는 값이 들어가 있더라도 파일이 다르면 둘은 다른 값이 됩니다. 리액트에 적용시키기리액트가 업그레이드 되면서 css 모듈을 적용시키는 방법이 장난아니게 쉬워졌습니다. css 파일 이름과 확장자 사이에..
앱을 만들고는 싶었지만 자바를 배울 마음은 없었다.보통 어플리케이션을 만들 땐 자바를 배우고, 안드로이트 스튜디오를 이용해야 합니다. 그래서 앱을 만들려면 언젠가는 배워야겠구나 하고 생각했지만, 지금 파이썬이나 자바스크립트를 다루는 것만으로도 벅차다고 생각했기 때문에 영영 미뤄지나 하는 생각이 들었습니다. 하지만 리액트 네이티브와 엑스포를 알게되고 앱을 실제로 만들어서 스토어에 올리고 난 후 깨닫게 된 것들을 공유해보려고 합니다.자바스크립트의 강력함을 알게되다.가장 놀란 것은 자바스크립트의 강력함입니다. 자신의 분야 뿐만 아니라 다른 분야까지 넘어가서 활동하는 모습을 보니 정말 대단하다고 생각하게 만드는 언어입니다. 프론트엔트를 넘어서 백엔드까지 진출하더니 이제는 네이티브 언어처럼 앱도 만들고, 인공지능..
컴포넌트를 확장해봅시다.저번 포스팅에서는 컴포넌트를 어떻게 만드는 지에 대해서 알아봤습니다. 이번 포스팅에서는 컴포넌트를 확장시켜보겠습니다. 버튼을 만들고 그 버튼을 토대로 모서리가 둥근 버튼을 만들었습니다. 이미 있는 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를 이용할 수 있다는 점이 매우 좋습니다...