개발 노트

01. Styled-Component? 모던 자바스크립트 라이브러리(React,Angular,Vue 등)가 인기를 끌면서 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 몽땅 때려 박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있다. styled-component는 css를 js에 쉽게 삽입할 수 있도록 도와주는 CSS-in-JS라이브러리 중 가장 널리 사용되고 있는 라이브러리이다. 02. 사용법 일단 npm 패키지를 설치해야한다. npm i styled-components 기본 ..

01.React Router Create-React-App은 page routing을 포함하지 않고있기때문에, routing 관련 라이브러리가 필요한데 React Router가 그중 가장 많이 쓰인다. React Router를 추가하고 싶다면 "npm i -D react-router-dom"을 터미널 창에 입력한다. 만약 v5에서 v6로 업그레이드 하는 것이라면 위의 코드 마지막에 @latest를 붙힌다. React Router는 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다. 이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다. 02. 사용법 아래 예제는 w3schools에 있는 예제이다. ..

01.useRef를 사용하면 렌더링 간에 값을 유지할 수 있다. w3schools는 이렇게 정의한다 - 업데이트 시에 re-rendering이 발생하지 않는 변경 가능한 값을 저장하는 데 사용할 수 있다. 무슨 말인지 잘 모르겠어서 추가로 찾아보았다. function ManualCounter() { const [count, setCount] = useState(0); let intervalId; const startCounter = () => { // 💥 매번 새로운 값 할당 intervalId = setInterval(() => setCount((count) => count + 1), 1000); }; const stopCounter = () => { clearInterval(intervalId); }..

1. useMemo Hook 01.The React useMemo는 memorized value를 반환하는 React의 Hook이다. w3schools 에서는 useMemo를 사용하면 값이 더는 계산될 필요가 없다고 저장하는 것으로 간주한다.라고 정의하고있다. 02.useMemo Hook은 이것의 dependencies가 없데이트 될 때, 오직 한번 실행된다. useMemo(callback function, declare array[]) : useMemo는 인자로 callback function과 의존성 배열을 받는다. const calculation = useMemo(() => expensiveCalculation(count), [count]); //아래의 함수를 배열에 의존하게 해서 count가 변하..

01.React.js 환경설정 React를 사용하기 위해선 아래의 react와 react-dom를 import해줘야 한다.(어려운 방식으로 시작) https://unpkg.com/react@17.0.2/umd/react.production.min.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js => react = library, interactive하게 만들어주는 원동력 react-dom = library or package, 모든 React Element들이 html body에 들 수 있도록 해준다. 02.React JS로 Element 만들기 01. element 생성 - const span = React.createElem..