독일개발자초록이

리액트 훅 useEffect를 JSX와 함께 사용해보자. 안녕하세요 이번 시간에는 예전 useEffect를 설명하며 빠트렸던 부분에 대해 설명하려 합니다. 리액트로 개발을 하다 보면 필연적으로 사용하게 되는 것이 useEffect입니다. useEffect는 렌더링이 끝난 뒤 한번 실행되게 되며, 파라미터에 따라 무제한으로 변화에 따라 실행시키거나 파라미터로 지정된 state가 변화 시 실행되거나 혹은 정말 렌더링 후 딱 한 번만 실행시키는 등 다양한 방법이 존재합니다. 이는 아래의 링크에서 확인하실 수 있습니다. https://ko-de-dev-green.tistory.com/18?category=865864 React hooks 리액트 훅 useEffect란? React hooks 리액트 훅 useEf..

Typescript와 React npm 모듈 설치 관련 정보. 개발자에 관한 관심이 많아지면서, 자연스럽게 코딩을 접하는 분들이 많아지고, 프런트엔드에 필요한 프로그래밍 언어, 라이브러리 혹은 프레임워크를 배우시게 되는 과정에서 리액트를 알게되거나 배우시는 분들이 많아지는 것 같습니다. 저는 개인적으로 너무 좋은 현상이라고 생각합니다. 개발자는 자신의 지식을 이리저리 꽁꽁 숨기는 직업이 아닌 너도나도 지식을 나누어 필요한 혹은 유용한 프레임워크 라이브러리 혹은 알고리즘을 대중화시키고 나누는 것이 중요합니다. 리액트를 배우시는 경우라면 자바스크립트를 어느 정도 사용하실 수 있다는 뜻일 것입니다. 또한 그 과정에서 타입스크립트를 들어보시거나 경험해 보신 분들도 많을 것입니다. 오늘은 타입스크립트로 리액트 프..

custom hook 이란? React hooks custom hook 이란? 오늘은 짧게 리액트 훅에서 커스텀 훅을 알아보겠습니다. 커스텀 훅이란 말 그대로 개발자가 스스로 커스텀 한 훅을 말합니다. 예를 들면 useState, useEffect, useContext 등은 이미 내장되어 있는 훅으로 바로 사용 가능하지만, 커스텀 훅은 개발자의 입맛에 따라 만들어 사용 가능합니다. 그럼 짧게 커스텀 훅은 무엇이고 또 언제 왜 사용하는지 간단히 알아보겠습니다. (어느 정도 커스텀 훅에 관해 알고 계신다면 바로 코드 예시로 가시는 것도 좋은 방법입니다.) 커스텀 훅이란? 언제? 왜? 사용하는가. 코드 예시. 마치며. 1. 커스텀 훅이란? 우리는 리액트를 사용할 때 상태에 관해서 많은 신경을 쓰게 됩니다. 리..

useReducer 란? React hooks useReducer 란? 저번 포스팅으로 useContext에 관해 알아보았습니다. 이번 시간에는 useReducer를 알아보고 useContext와 함께 사용되는 예시를 알아보겠습니다. 사실 useContext를 사용 시 useReducer 없이도 충분히 문제없이 사용 가능합니다. 하지만 useReducer를 통해서 좀더 깔끔하고 이해하기 쉽게 알아보겠습니다. useReducer란? useContext와 사용 방법 마치며 1. useReducer란? 우리는 상태를 업데이트할때 useState라는 훅을 이용합니다. useReducer 또한 상태를 관리할 때 사용하는 훅이며 특히나 useContext와 같이 사용되는 경우가 많습니다. 기본적으로 useReduc..

useContext란? React hooks useContext란? 오랜만에 리액트 주제를 적어보네요. 이제 독일에도 봄이 진짜로 왔는가 봅니다. 산책을 나가보니 새소리와 벌레소리는 여기저기서 들리고, 꽃도 여기저기 많이 피었더군요. 자 그럼 보론으로 들어가 보겠습니다. 목차. useContext 란? 사용 방법? 어디에 사용하면 좋은가? 마치며. 1. useContext란? useContext란 무엇일까요?? useContext는 쉽게 말하면, 내게 필요한 props를 글로벌하게 사용할 수 있게 도와준다고 말할 수 있습니다. 우리는 리액트로 작업하면서 props를 정말 많이 사용하게 됩니다. 부모에서 자식 클래스로 바로 넘겨주는 props라면 크게 불편할 것 없이 인자를 넘겨주면 되겠지만, 부모에서 자..

리액트 axios란? axios 사용하기. Node.js axios란? Axios는 npm을 이용하여 다운로드 가능한 HTTP request 모듈 혹은 라이브러리입니다. 이는 ES6 Promise API를 지원하며 Node.js 혹은 브라우저의 HTTP request에 사용됩니다. 오늘은 가볍게 사용 방법을 알아보도록 하겠습니다. ES6 전 비동기식 처리를 하려면 콜백 지옥이 따로 없었습니다. 함수 안에 함수 또 함수를 불러와 코드는 지저분하고 길며 피라미드가 쌓이기 십상이었습니다. 하지만 ES6로 넘어오면서 이러한 모습은 then이라는 키워드로 깔끔하게 정리됩니다. 혹은 aync, await으로 사용하는 것도 가능합니다. 다행히 axios는 이러한 ES6를 호환하기에, 크게 어렵지 않게 HTTP req..