리액트를 사용하려면 useEffect라는 훅에 대해 꼭 알아야합니다. useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 즉, 렌더링될 때 특정작업을 실행시키고 싶을 때 useEffect를 사용하는데요. 대표적인 예로는 렌더링될 때 api호출을 다시해야하는 경우가 있겠습니다. 선언방법은 다음과 같습니다. 첫번째 인자는 ()=>{}로 보이는 콜백 함수이며, 두번째 인자는 배열입니다. 배열안엔 보통 변견되는 상태(useState)값을 넣으며 그 값이 변할 경우 콜백함수에 있는 기능을 실행하게 됩니다. 위 사진처럼 빈칸일 경우 처음 렌더링되는 경우만 콜백함수안의 기능을 실행하게 됩니다. 말로 설명하면 헷갈리니 코드로 보여드리겠습니다. 다음과 같이 코드를 작..
타입스크립트를 사용하는 이유는 다양할 것입니다. C#을 주로 사용하다가 자바스크립트의 세계로 입문하고 싶었다거나 자바스크립트를 사용하면서 정적이지 않은 프로그래밍에 지쳤다거나 등 제가 생각하는 타입스크립트를 사용하는 가장 유력한 이유는 오류를 내뱉는 시점라고 생각합니다. 자바스크립트는 원하지 않은 연산도 최선을 다해 결과를 도출해냅니다. 예를들어 1+[]과 같은 다른 타입끼리의 연산이 있을 수 있겠습니다. 이런 기능이 도움이 될 수도 있겠지만 버그를 쉽게 확인하는데는 전혀 도움이 되질 않습니다. 타입스크립트는 이런 버그를 알려줄 뿐만 아니라 코드를 입력하는 순간 곧바로 에러 메시지를 발생시킵니다. 3 + [] // 에러 TS2365: '3' 타입과 'never[]' 탕입에 연산자 '+'를 적용할 수 없음..
useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 정의는 위와 같습니다. 저번글에서 우리는 useState를 통해 리렌더링이된다는 사실을 확인했고 왜 그런지도 알아봤습니다. 하지만 개발을 하다보면 렌더링을 막아야하는 경우도 생기게 됩니다. 그럴 때 사용하는 것이 useRef인데요. useRef안의 값은 수정을 해도 렌더링이 되지 않습니다. React에서 Component가 unmount될 때의 state를 딱 한번만 log를 찍고 싶을 경우 어떻게 해야할까요? input값을 useState로 저장하는데 글자를 적을 때마다 렌더링이 된다. 이걸 막으려면 어떻게 해야하나요? useRef를 알고 있다면 위 질문에 답을 할 수 있습니다. useRef를 console로 찍어..
여러분은 타입스크립트에 대해 얼만큼 알고 계신가요? 단순히 유행하기 때문에 사용하나요? 아니면 동료가 사용하기 때문에 사용하시나요? 저도 처음 타입스크립트를 접한 이유는 남들이 사용하니까 라는 심플한 이유에서였습니다. 하지만 개발을 하면서 생각이 많이 바뀌게 되었습니다. 타입스크립트란 ? 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍언어라고 정의합니다. 자바스크립트에 타입을 유여한 언어로 간단히 소개할 수 있습니다. 그렇다면 타입스크립트의 사용이유는 무엇일까요? 1. 버그예방 2. 코드 퀄리티 향상 3. 크로스브라우징 문제 해결 등.. 제가 타입스크립트를 사용하는 이유는 에러를 발생시키기 위해서입니다. 타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시킵니다. 꼬불..
