Dog foot print

useContext란 ? useContext는 react에서 제공하는 훅으로, 하위 컴포넌트에게 context를 제공하는 훅입니다. “context”란 직역하면 환경이라는 의미이지만, 여기서는 리액트에서는 각 컴포넌트가 참조할 수 있는 데이터 모음이라고 생각하시면 될 것 같습니다. 아래의 코드는 프롭스를 하위 컴포넌트로 전달하는 예시입니다. import React from 'react' function End({text} : {text : string}){ return ( {text} ) } function Middle({text} : {text : string}){ return ( ) } export default function App() { const text = "Hello world"; retu..

useEffect 란 ? useEffect 함수는 렌더링 이후 컴포넌트와 외부의 시스템을 연결해주기 위해 만들어진 훅이다. 별도로 컨트롤이 가능하다면, “useEffect”를 사용해, 사이드 이펙트를 발생시키기도 한다. useEffect Types function useEffect(effect: EffectCallback, deps?: DependencyList): void; // type EffectCallback = () => (void | Destructor); type DependencyList = ReadonlyArray; // type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; useEffect는 첫번째 인자인 effect는 렌더..

컴포넌트내에서의 상태 갱신 React를 접하는 이들이 가장 먼저 사용해보는 컴포넌트의 상태를 관리하는 Hook이다. 아래의 간단한 코드를 보자. 아래의 예제는 두개의 버튼을 두어, numb라는 값을 1씩 증가시키거나, 감소시킨다. import React from 'react' export default function App() { let numb = 0; return ( {numb} { numb += 1 console.log(numb) }}> Increase { numb -= 1 console.log(numb) }}> Decrease ) } 아래는 결과이다. 우리는 화면에 numb가 버튼의 클릭에 따라 갱신되기를 기대했지만, 화면에 갱신은 되지 않지만, 값은 실제로 변하고 있다. 함수형 컴포넌트에서 돔..

서론 App의 컴포넌트 트리가 혹시 길어지는 것을 경험 해본 적이 있는가 ? 짧은 토이 프로젝트의 경우 컴포넌트 노드의 레벨이 3정도 될 것이다. 이런 경우 root component에서 최 하위 컴포넌트 노드에게 정보를 전달 해주기 위해, props를 각 레벨의 컴포넌트 노드에게 전달 해준 경험이 존재 할 것이다. 그렇게 어려운 일도 아니고, props를 각 컴포넌트에게 전달 하면 장땡이다 ! 이처럼 짧은 거리의 컴포넌트에게는 props로 데이터를 전달해주는 것은 충분하다. 그러나 트리의 높이가 4이상을 넘어가게 되면, props로 상위 컴포넌트의데이터를 전달해주는 것은 매우 힘들다 . 불가능하다는 이야기가 아니다. 코드가 지저분해지고, 이를 하위 프롭스로 전달하는 과정에서, 개발자의 실수로 유지하지 ..

서론 “Side Effect”를 사용하기 위해서는 useEffect 함수로 의존성 배열을 통해 발생 시킨다고 지난번 포스팅에서 언급하였다. 그러나 이전에 작성한 함수형 컴포넌트를 내부를 보면 useEffect를 내부에서 사용함에 따라, sideEffect를 발생 시키는 useEffect 함수를 재 사용 하기 어렵고, 간결함이 장점인 함수형 컴포넌트가 useEffect함수로 오염되어 버렸다. function App() { const [counter,setCounter] = useState(0); const [name,setName] = useState('hokeys'); const [show,setShow] = useState(false); useEffect(()=>{ console.log("compone..

회사는 바삐 돌아가고, 공부 할 내용은 많아, 기획 되어있던 시리즈가 진도를 못나가고 있다. 그래서 많은 이들이 실수 할 만한 내용에 대해서 작성해보려 한다. 이 내용은 타입스크립트로 작성되어 있는 함수형 컴포넌트를 사용하지만, REACT의 특징을 어느정도 익힌 사람이라면 이해 할 수 있도록 작성되어 있다. Map 을 통한 컴포넌트로의 매핑 Map 메서드는 배열을 재구성하는 용도로 사용되는 배열 메서드이다. 배열 타입이라면 map 메서드를 가지고 있다. 혹시라도 map 메서드가 익숙하지 않은 사람을 위해 간단한 예를 들어보자 . Common.js에서의 사용 const numbers = [1,2,3,4,5]; const addedTwoInNumbers = numbers.map((number)=>{ retu..

서론 이번 주 목요일 드디어 계명대학교에서 마지막 시험을 치뤘다. 후련한 마음이 앞서며 나를 괴롭혔던 많은 비효율적인 학교 행정과 수업에서 벗어난다 생각하니 춤이라도 추고 싶은 심정이다. 대학교 수업과 개발 일을 병행하면서 지내다 보니 너무 자기계발에 소홀했다는 생각도 들고, 개발 도중에 웹소켓이라는 놈의 정체에 대해서 늦게 알기도 해서 웹소켓을 응용하여, 병원 홈페이지나 중고차 사이트에서 사용하는 1:N 채팅을 만들어 볼까 싶어 기획하였다. 1 : N 채팅은 고객은 사이트 관리자와만 채팅이 가능하지만, 사이트 관리자는 대화를 시도한 모든 사용자들과 소통이 가능하다. 여기에 조금 덧 붙여 기존 1:N 채팅 프로그램은 종료시에 더 이상의 소통이 불가능 하지만, 이 프로그램은 종료하여도 다시 접속 할 수 있..

React를 이용한 Calendar Application 만들기 서문 생각 보다 바닐라 JS를 이용한 calendar 만들기가 인기 있어 REACT를 활용한 Calendar app을 만들기를 구상하게 되었습니다. 올 해 2020년 생각지도 못한 국가근로 및 코로나 사태로 많은 스트레스를 받아 포스팅을 중지 했었습니다. 그렇지만 Jasmin 회원들과 무럭 무럭 커가는 대한민국의 프로그래머 꿈나무에게 좀 더 도움이 되고자, 다시 포스팅을 시작 하도록 마음 먹었습니다. 개요 해당 Calendar Application은 사용자에게 달력을 제공 해줌으로써, 주말과 공휴일 그리고 현재 날짜를 구분하고 이번 달의 끝과 시작을 구분 할 수 있도록한다. 사용하는 lib Moment Moment는 날짜와 시간에 관련된 라..