[TIL] 2022.2.21.(화)

Storybook

UI개발 즉, Component Driven Development를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한번에 하나의 컴포넌트를 작업할 수 있다. 전체 UI를 한눈에 보고 개발이 가능하다!(복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요가 없다.

 

UseRef

리액트컴포넌트는 내부상태(state)이 변할때마다 다시 렌더링 된다. 

그러면 다시 렌더링이 되더라도, 기존에 참조하던 컴포넌트 함수 값이 그대로 보존되어야 하는 경우가 있을것이다.

이럴때 사용하는것이 useRef이다.

useRef는 돔요소 혹은 저장공간에 접근하기 위해 사용되는 React Hook이다.

 

---

import,export는 또 뭔데?

require? require은 모듈을 불러온다.

경로를 지정하지 않았을때는 경로가 node_modules로 향하게 된다. 모든 모듈은 node_modules에 모듈의 파일이 저장되게 된다.

그렇기 때문에 따로 경로를 지정하지 않아도 리액트 모듈을 불러올 수있다.(설치했을때!)

 

자바스크립트에서는 모듈을 지원해 하나의 파일을 여러개로 나눌 수 있다. import는 파일의 경로에 직접 접근하는 방식이다.

export는 변수,함수,클래스 앞에 export 키워드를 붙여 모듈의 기능을 외부에서 사용할 수 있도록 내보낸다.

즉 모듈시스템을 밖으로 내보낼때는 export,불러올때는 import를 사용하는 것이다.

**export와 export default의 차이는 또 뭔데??(눈물난다...)

export default

- 해당모듈엔 하나의 개체만 있다는 의미로 받아들여진다.(한 모듈 당 export default는 하나만 써야함!)

- 해당모듈의 개체 전체를 export한다는 의미를 갖는다.

- 원하는 이름으로 import가 가능하다.!

export

-특정개체만 가져오는게 가능함.

ex. export{내보낼 개체명}\

export {ImFine}
import {import} form <./파일경로>