Coding Story

node modules을 직접 삭제하려면 시간이 엄청 오래 걸린다. 명령어로 삭제하면 금방 삭제된다. npm install rimraf -g // 패키지 설치 rimraf node_modules // 삭제

useEffect란? 렌더링되거나 변수의 값 또는 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수. 페이지가 처음 렌더링되고 난 후 무조건 한번 실행된다. useEffect에 배열로 지정한 useState값(Dependency)이 변경되면 실행된다. useEffect(effect, [, deps]); -effect 함수 렌더링 이후 실행할 함수 -deps 특정한 값이 변경될 때 effect함수를 실행하고 싶을 경우 배열안에 그 값을 넣어준다. 빈 배열일 경우 렌더링된 후 단 한번만 실행된다. useEffect(() => {}); // 1 useEffect(() => {}, []); // 2 useEFfect(() => {}, [특정 변수 또는 오브젝트]); // 3 1. Dependen..

vscode-styled-components 자동완성 되는지 모르고 일일히 다 치고 에러고쳤던 지난날의 나 ..^^ 이 플러그인을 설치하면 기존 css처럼 자동완성이 가능하다. 좋타

vscode extension에서 react snippet을 다운받는다. 함수형 컴포넌트를 만들 때 rafc를 치면 아래와 같이 자동으로 완성된다. rafce를 치면 아래와 같이 완성된다.

css 초기화를 위해 styled-reset 설치 npm install styled-reset styled-components styled-components는 local로 동작한다. 개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리한 경우가 있다. 그러므로 GlobalStyles.js 파일을 생성해 Global Style을 관리한다. createGlobalStyle() 함수로 전역 스타일 컴포넌트를 생성한다. GlobalStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` ${reset}; body { display: flex; justify-cont..

React.memo() UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트(Higher Order Component, HOC) React.memo()를 제공한다. 컴포넌트가 React.memo()로 래핑 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징(memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, Rect는 메모이징된 내용을 재사용한다. 언제 사용? 같은 props로 렌더링이 자주 일어나는 컴포넌트에 사용한다. 순수 함수 컴포넌트 일 때 자주 렌더링 될 때 같은 prop으로 리렌더링 될 때 컴포넌트가 클 때 컴포넌트가 무겁지 않고 자주 다른 props를 받아 렌더링한다면 memo로 감싸는게 불필요 하다. function MovieViewsRealtime({..

import React, { useState } from "react"; function App() { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event; setValue(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log("hello", value); }; return ( Log in ); } export default App;

노마드코더 리액트 마스터 클래스 #2 STYLED COMPONENT index.js import React from "react"; import ReactDOM from "react-dom"; import { ThemeProvider } from "styled-components"; import App from "./App"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke", }; ReactDOM.render( , document.getElementById("root") ); App.js import..

import styled from "styled-components"; const Father = styled.div` display: flex; `; const Input = styled.input.attrs({ required: true })` background-color: tomato; `; function App() { return ( ); } export default App; As as 라는 props를 사용하면 명시한 태그로 컴포넌트를 사용할 수 있다. Father 컴포넌트는 header가 된다. Attrs attrs 뒤에 대괄호 안에는 input으로 전달된 모든 속성을 가진 오브젝트를 담을 수 있다. 모든 input 에 required: true가 적용된다.

노마드코더 React JS 마스터 클래스 #2 .2 컴포넌트 확장이란, 기존 컴포넌트의 모든 속성을 가지고 오면서 새로운 속성까지 더해주는 것이다. props를 통해 컴포넌트 style을 설정한다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100..