Event 객체에는 Target과 currentTarget이 존재한다. const handleClick = (e) => { console.log(e.target); console.log(e.currentTarget); }; 버튼 target은 이벤트를 발생시킨 주체를 의미하고, currentTarget은 이벤트 핸들러를 가지고 있는 요소를 나타낸다. 필요에 따라 target 또는 currentTarget을 사용해서 이벤트 핸들링을 하면 된다.

nullish 병합 연산자 ?? 를 사용하면 조건식을 간단하게 처리할 수 있다. a ?? b 의 경우 a가 null이 아니고 undefined도 아니면 a 값을 return 그 외의 경우에는 b 값을 return 한다. x = (a !== null && a !== undefined) ? a : b 이 코드를 ?? 연산자를 사용해서 간단하게 처리가 가능하다. || 와 차이점 || 연산자의 경우에도 비슷한 처리가 가능하다. a ?? b 마찬가지로 a값이 있다면 a를, 없다면 b를 return 해준다. 그럼 차이점은 무엇일까? let height = 0; height = height || 100 // 100 height = height ?? 100 // 0 ||의 경우 0도 false에 해당하지만 ??의 경우..

React를 사용하다보면 높은 확률로 ( 거의 무조건 ) Hooks를 마주하게 될 것이다. 당연하게 본인도 React를 사용하면서 Hooks를 아주 애용하면서 잘 사용하고 있다. 이런 Hooks의 핵심? 장점?이 바로 Custom Hook를 만들어서 사용할 수 있다는 것이다. 이미 사용하고 있는 useState, useEffect ... 등은 Rules of Hooks ( 훅의 규칙 ㅋ )만 지켜주면 문제없이 사용할 수 있습니다. 그렇다면 Custom Hook도 마찬가지로 해당 규칙만 지키면 될까요? 또 어떤 경우에 Custom Hook을 만들면 좋을까요? useInput function useInput () { const [state, setState] = useState(""); const onCha..

지금까지 리액트 환경을 구성하는 부분은 많이 작성했기 때문에 리액트 환경 구성을 모두 다 했다는 조건으로 글을 작성합니다. Canvas 만들기 //GlobalStyle.tsx import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; } `; export default GlobalStyle; 우선 거슬리는 body의 margin을 styled-components의 createGlobalStyle을 사용해서 없애준다. import GlobalStyle from './GlobalStyle'; import Home from './pages/Home'; interface ..

State and Lifecycle 올것이 왔다....! State 올바르게 사용하기 React에서는 State를 직접 수정하면 안된다. setState 방식을 사용하지 않고 state를 직접 수정한다면 컴포넌트를 다시 렌더링하지 않는다. 띠용! 여기서 우리가 state를 구현할 때 신경 쓸 사항이 하나 생겼다. setState를 사용해야지만 리렌더링을 해주면 된다! State 업데이트는 비동기적일 수 있다. 우리가 사용하는 state는 비동기적으로 업데이트를 할 수 있다. 그러므로 setState로 값을 지정해줄 때 자신의 값에 의존하면 안된다. const [state, setState] = useState(1); const func = () => { setState(state + 1) } 만약 비동기..

상태 관리? 작은 프로젝트를 만들 때는 state를 정의하고 state를 바탕으로 필요한 컴포넌트를 랜더링 한다. 하지만 프로젝트의 규모가 커지면 부모 컴포넌트의 state가 필요한 자식 컴포넌트로 가는 깊이가 깊어질 수 있다. 그렇게 되면 필요없는 컴포넌트마저도 state가 거쳐가기 때문에 전체적인 코드가 복잡하게 된다. 그래서 나온 것이 상태 관리 시스템이다. 전역으로 상태를 관리하고 변화가 감지되면 상태를 가지고 있는 모든 컴포넌트에서 리 렌더링이 발생하는 방식이다. 만들기! 가장 일반적인 방법이 Pub-Sub 패턴으로 만드는 방식이 아닐까 싶다. 전반적인 틀을 Store라는 클래스를 만들고 해당 클래스의 state는 전역으로 관리되기 위해서 싱글톤으로 만들 것이다. 그리고 정의된 state를 각 ..

0. 준비사항 본인은 프로젝트를 구성할 때 express-generator를 사용하기 때문에 먼저 설치를 해야한다. npm i -g express-generator express-generator는 자동으로 express 환경울 구성해주는 멋진 도구이다. 1. npm 프로젝트 생성 // express 프로젝트명 --view=템플릿 express webpackProject --view=ejs cd webpackProject npm i express-generator를 설치하면 express 명령어를 사용할 수 있는데, 원하는 프로젝트명을 입력하고 원하는 템플릿을 입력해주면 된다. 템플릿에는 pug, ejs 등이 있는데, 본인은 pug알못이기 때문에 ejs를 사용해서 설치했다. 명령어를 실행하면 위와 같이 ..

우리가 조건을 처리할 때 가장 먼저 생각하는 것이 if문과 switch문이다. const ifCase = true; if(ifCase) console.log("True"); const switchCase = true; switch(switchCase) { case true: console.log("True"); break; default: console.log("False"); } 여기서 좀 더 간단하게 사용하고 싶은 경우에는 삼항연산자를 사용한다. const case = true; console.log(case ? "True" : "False") 최근에 알게된 것이 하나 더 있는데, ?? 연산자이다. ( 정확한 명칭은 아직 모르는 .... ) const a = undefinded; console.log..