개발을 하다보면 상수 선언을 할 때가 많은데 React, 특히 React Native에 상수를 선언할 때 특히 주의해야 할 점이 있다. 컴포넌트 외부에 상수를 선언하면 그 상수는 컴포넌트의 갱신주기 및 라이프사이클을 완전히 벗어나게 된다. 일반적인 경우 큰 문제되지 않지만, 실제로 그것이 고정된 값(상수)가 아니라 어떤 조건에 따라 변화하는 값을 다룰땐 주의해야 한다. 특히 시간과 같이 실제로는 내부적으로 변화되어야 하는 값을 상수로 처리할때 주의해야 한다. 아래 예시를 보자.참고로 moment는 현재 시간을 가져오기 위해 사용한 타임 라이브러리의 일종이다....const NOW_TIME = moment() // 컴포넌트 외부에 선언된 상수export default function ExampleComp ..

권장사항에서 빠진 create-react-app와 최근의 프론트엔드 개발 트렌트 제 블로그에 관심이 많으신 분들은 이미 알고 계시겠지만, 사실 전 React보단 React-Native 개발자에 가깝습니다.(아, 웹 하고 싶다!) 그래서 한동안 React 웹서비스를 처음부터 만들 일이 많지 않았죠. 조그마한 토이프로젝트로 React에 대한 열정을 되살리고자 npx create-react-app 을 사용했습니다. 그러던 중 꽤나 충격적인 사실을 알게 되었습니다. 바로 React 공식문서에서 더 이상 create-react-app을 권하고 있지 않다는 사실을 말이죠. React에 관심있으신 분들은 아시겠지만 최근 React 공식 웹사이트가 새로 오픈했습니다. React The library for web an..

React와 관련한 글을 메일링서비스로 받아보던 중 이해하기 쉽고 clap 수가 1300으로 높은 글이 있어 원작자의 허락을 구해 번역해봤습니다. 원본 글에서 댓글을 여러 의견이 있었는데 이 번역글에서도 포함하여 일부 번역해봤습니다. 원본 글은 https://betterprogramming.pub/8-ways-to-write-clean-react-code-610c502ccf39 입니다. React Clean Code 더 클린하고 더 나은 코드를 작성하는 8가지의 간단한 방법 "클린코드"는 그저 동작만 하는 코드 그 이상을 의미합니다. 클린코드는 읽기 쉽고 이해하기 쉬우며, 깔끔하게 구성되어 있습니다. 이번 글을 통해 리액트 코드를 보다 "클린"하게 만드는 8가지 방법에 대해 알아보겠습니다. 그전에 이야기..

React와 관련한 글을 메일링서비스로 받아보던 중 이해하기 쉽고 clap 수가 높은 글을 발견해 번역해봤습니다. 원본 글에서 댓글을 통해 반박 내용이 있는데, 번역본에도 포함했습니다. 원본 글은 https://levelup.gitconnected.com/react-antipatterns-to-avoid-7134940f4f04 입니다. 리엑트(React)는 인터렉티브한 모던 웹앱을 만들기 위해 가장 많이 사용하는 프론트엔드 라이브러리입니다. 모바일 앱을 만들 때에도 쓸 수 있죠. 이번 글에서 우리는 리액트에서 피해야 할 안티패턴에 대해 알아볼 것입니다. 컴포넌트에서의 bind()와 함수들 우리가 리액트 class 컴포넌트에서 bind를 호출할 때, 우리의 props 안에서 반복적으로 부르지 않아야 합니다..

componentDidUpdate()에서 setState()를 즉시 호출할 수도 있지만, ... 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다는 점에 주의하세요. - React 공식문서 componentDidUpdate(){ ... this.setState({currentAddress:items[0].region.area3.name}); } React로 프로젝트를 진행하다 특이한 현상을 발견했습니다. 화면을 render한 직후 다음 단계에서 외부 API 호출을 하기 위해 componentDidUpdate()를 사용하는데 여기서 위의 코드처럼 setState()를 사용하니 무한루프에 빠지는 것입니다. 특히나 외부 API를 호출하는 로직이 들어가있어 이 상태로 5분만 내버려두면 한달치 무료 호출량을 ..