React _ ToDoList 만들어보기(1) - React 및 Javascript 기초

Import / Export

특정 js 파일을 export 하고 싶을때는 이렇게 씁니다.

const Box1 = () => {
  return ();
};

const Box2 = () => {
  return ();
};

export default Box1; //Box1 하나만 export

export {Box1, Box2}; //Box1,Box2 둘 다 export

 

이는 js 파일에서 다시 import 할때도 살짝 다릅니다.

import Box1 from "./box"; // box.js 에서 export를 Box1 하나 한 경우

import {Box1,Box2} from "./box"; // box.js 에서 export를 두 개 이상 한 경우

import * from '.box.js'; //box.js 에서 모든 것을 가져오고 싶은 경우

 

styled-components

 

styled-components를 이용하면 css 파일을 따로 두지 않고 js 파일에서 css 코드를 바로 수정할 수 있습니다.

 

설치는 아래 웹사이트에서 npm i styled-components 복사 후 node에서 실행하시면 됩니다!

www.npmjs.com/package/styled-components

 

styled-components

styled-components 사용 예시)

import styled from "styled-components";

const Styled = {
  wrap: styled.div`
    width: 400px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #49F48C;
  `,
};

function App() {
  return (
    <Styled.wrap>
      Hello
    </Styled.wrap>
  );
}

 

우선 "styled-components"로 부터 styled를 import 해줍니다. 그리고 변수 Styled를 설정한 후(styled라고 설정시 위에 import 한 styled와 똑같아서 오류 발생!) 사용할 객체를 하나씩 넣고 css 를 설정해 줍니다. 여기서 주의할 점은 설정한 객체를 사용할때 바로 객체이름을 쓰는 것이 아닌 Styled.객체이름 이렇게 적어야합니다. (위 코드의 경우 return 값에 <wrap>이 아닌 <Styled.wrap>을 사용해주었습니다.)

 

* visual studio를 사용하시는 분들은 extension에서 tabnine을 설치하시면 자동완성 기능이 활성화 됩니다.

(자신이 코드를 입력한 데이터를 바탕으로 자동완성 하므로 코드를 많이 쳐야 자동완성 기능이 잘 활성화됩니다!)