본문 바로가기

Import

[React] styled-components 안녕하세요 오늘은 React에서 css를 사용하는 방법 중 하나인 styled-components에 대해 포스팅하겠습니다. styled-components 는 app.css에서 작성하는 것도 아니고 , jsx 파일내에 태그들에 직접 작성하는 것도 아닙니다. 기본 html 구조에서 태그에서 작성했던 태그처럼 페이지 상단에서 작성하는 방식입니다. 1) 설치 터미널을 열고 npm install styled-components 를 실행합니다. 2) styled-components import import styled from 'styled-components'; 상단에 import 해줍니다 3) 변수를 생성하여 style 작성하여 담기 let Btn = styled.button` background : ${ p.. 더보기
[React] 파일import , export 코드를 작성하다 보면 코드가 길어져서 가독성이 떨어지는 경우가 발생합니다. 이럴 경우 다른 파일에 생성해둔 코드를 import 하여 그 파일의 변수,함수 등등을 사용합니다. 재직중인 회사에서 사용하는 jsp에서는 이런식으로 태그를 사용했고 , 자바스크립트도 마찬가지로 태그()를 이용하여 import 했습니다. React에서 사용하는 import,export와 개념자체는 비슷하지만 , 하나 다른 점은 현재 페이지 기준으로 , 불러올 페이지에서 export를 해줘야 한다는 점입니다. data1이라는 변수를 App.js에서 사용하는 방법입니다. ex) data.js를 App.js 로 import하기 export는 하단에 작성 let data1 = 10; export default data1; App.js 상단.. 더보기