Dog foot print

서론 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..

Side Effect ‘Side Effect’ 란 무엇인가 ? 바로 함수 호출 시, 함수 내부가 아닌 외부에 영향을 미치는 것을 말한다. 다음의 코드를 보도록 하자 let a = 0; function sideEffect(){ a++; } sideEffect() sideEffect는 매개변수로 들어온 a를 변경하거나, a를 1을 증가시켜 return하지 않는다. 단순히 어떤 함수를 이용하다가 외부 스코프에 있는 변수 a를 변경하였다. 이처럼 외부 상태를 변경시키는 것을 ‘side Effect’라고 한다. ‘부수 효과’라는 어감 때문에, 무조건 안 좋은 느낌이 들 수 있지만 절대 나쁜 용도로 사용하는 것이 아니다. Use effect 클래스 형 컴포넌트에서는 부수효과를 발생 시키기 위해, ‘component..

서론 : 나는 React를 학원에서 처음 배울 당시 클래스 형 컴포넌트를 이용하여, web app을 작성하였다.그 당시에도 Hook이 존재는 하였지만, CRA에서는 Hook을 지원하기 전이였고, 함수형 컴포넌트는 아직 보완할 점이 많아 React 사용자들에게는 뜨거운 감자 같은 것 이었다. 시간이 흘러 CRA에서 Hook을 공식지원하게 될 때, 나 또한 Hook에 발을 담가 보았지만, class형으로 만든 내 코드는 여전히 잘 동작 하였기에 나의 주목을 끌지 못하였다. 2020년 하반기 많은 것들이 변화하였다. Class형으로 작성한 내 코드는 규모가 커질 수록 관리하기 매우 어려웠으며, 빌드 속도가 증가하는 등 많은 이슈가 내 앞으로 다가왔다. 또한 Typescript 공부 할 수록, 함수형 컴포넌트와..

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

React 로 Calendar app만들기 - 5 클릭 한 날짜 표시하기 금일은 클릭하거나 최초 RCA 마운트 시 오늘에 해당하는 날에 Day컴포넌트에 색상을 다르게 해주는 작업을 할 것입니다. 그리고 캘린더에서 이번 달이아닌 부분을 클릭하게 되면 해당 달력으로 이동되게 끔 할 예정입니다. /src/App.js import React, { Component } from 'react' import Header from './Header' import Calendar from './Calendar' import moment from 'moment' import './style/RCA.css' export default class App extends Component { state = { calendarYM..

React로 만드는 calendar app만들기 Calendar 날짜 표현하기 금일 만들어 볼 것은 calendar에 날짜를 표시하는 부분입니다. 날짜를 표시하고 최초 마운트 시 오늘에 해당하는 날짜가 검게 표현되어야 합니다. 또한 토요일과 일요일은 평일과 다르게 색상을 표현해야 합니다. 마지막으로 이번 달이 아닌 날이 달력에 표시되게 되면 흰색으로 표현되게 끔 해야합니다. Issue 발생 ! 평소 달력은 이렇게 5주가 보통 정상적이지만 달에 따라서는 6주인 경우가 존재하고 2월의 경우 4주가 존재하는 경우가 있습니다. 달력이 만약 5주에서 6주 그리고 4주로 계속해서 레이아웃이 변경 되는 경우 사용자가 불편함을 느낄 가능성이 매우 높습니다. 그렇기에 우리는 5주를 기본 주로 두고, 6주인 경우 23일과..

React로 Calendar app만들기 -3 Calendar container 요일 표시하기 이번 작업은 요일을 표시하는 Datehead component를 작업할 예정입니다. 현재 우리의 달력 app은 한글로 이루어져 있지만 사용자에 따라 영어로 sun, mon, tue, wed, thu, fri, sat,로 표현도 가능하고 한자로 日, 月, 火, 水, 木, 金, 土 로 표현 가능합니다. 그렇기에 개발자의 편의성을 위하여 Dateheader component로 요일에 대한 표현을 전달하면 요일을 표시하도록 구상했습니다. 이 과정에서 생각해볼 수 있는 것은 다형성의 원칙으로 인하여 “sun, mon, tue, wed, thu, fri, sat”도 요일을 모은 표시 형식이며, [‘sun’, ‘mon’, ..