Ideveloper's software blog

본 글은 원작자 Kent C. Dodds의 허락을 맡고 진행한 번역입니다. 원 글은 https://kentcdodds.com/blog/usememo-and-usecallback 입니다. useMemo와 useCallback을 어떻게 사용해야하고 주의할점은 무엇인지 파악해 봅시다. https://ideveloper2.dev/blog/2019-06-14--when-to-use-memo-and-use-callback/ (옆의 리뉴얼된 블로그글 링크에서 확인하시기 바랍니다) Steady Study Ideveloper Front end Developer who steadily study ideveloper2.dev

React (Thinking about emotion js vs styled component) emotion.js와 styled component를 비교하고, 관련 예시로 면밀히 분석해보는 글을 새롭게 개편한 블로그에 포스팅 해보았습니다. https://ideveloper2.dev/blog/2019-05-05--thinking-about-emotion-js-vs-styled-component/

React:How Are Function Components Different from Classes? (함수형 컴포넌트와 클래스 컴포넌트는 어떻게 다른가?) 번역 새롭게 개편한 블로그에 글을 작성하였습니다. :) 의역이 들어간 부분이 있어 피드백 주시면 감사하겠습니다 링크: https://ideveloper2.dev/blog/2019-03-12--how-are-function-components-different-from-classes/

React :React - React Concurrent Mode | React Concurrent Mode? 최근 리액트 16.8이 릴리즈 되고 React hook이 정식으로 포함 되면서 React Hook이 매우 핫한데요, 리액트팀의 React Hook 다음 로드맵인 react의 concurrent mode에 대해서 미리 살펴보고자, 사내 스터디에서 관련 자료를 조사하고 정리했던 내용을 블로그에 정리해 보았습니다:) 아직 정식으로 발표 된 내용이 많이 없어 관련 자료를 조사하며, 의역이 들어간 부분이 있을거라 참고하고 보시고 틀린 부분은 피드백 주시면 될 것 같습니다.! 그리고, React Concurrent mode와 관련해 아직은 정식으로 확정된 내용이 많이 없어, 변경될 가능성이 충분하니 참고만..

React:Taste the principles of functional programming in React 이 글은 원작자 David Kopal의 허락을 맡고 https://www.codinglawyer.io/posts/taste-the-principles-of-fp-in-react 를 번역한 글입니다. (본인이 의역한것도 있으므로, 잘못된 번역 피드백 주시면 감사하겠습니다! 감사합니다) 지속가능한 컴포넌트 구조는 안정적인 react application을 개발할때, 선행되어야하는 필수요건입니다. 이러한 것은 higher-order-components (HoCs) 고차 컴포넌트를 사용하면서, 즉 함수형으로 코드를 짜면서 이뤄낼수 있습니다. 이러한 아이디어는 당신의 컴포넌트에서 로직을 분리하기 위함입니..

React:리액트에서의 shallow compare부터 React.PureComponent 까지 | 상황 this.state = { someValue: true }; ​ this.setState({ someValue: true });리액트를 사용하여 개발할때, 위와 같은 상황에서는, setState는 무조건적으로 state를 업데이트하게 되고, 그에 따른 불필요한 렌더링을 하게 됩니다. 따라서 이를 방지하기 위해, 아래와 같이 1. React.PureComponent2. shouldComponentUpdate 주기를 기존 클래스컴포넌트에 추가 를 적용시켜 문제를 해결할수 있습니다. | Shallow compare란?shallow compare는 equality를 체크하는것입니다.숫자나 문자열 같은 sca..

React :페이지 스크롤 후 특정시점에 액션 실행시키는 방법, 특정 컴포넌트의 브라우저 위치에 따라 특정 액션 실행시키는 방법 | 시작하기에 앞서스크롤시에, 특정시점 (1. 웹 페이지를 특정영역만큼 스크롤 했을때 2. 컴포넌트가 브라우저상에서 특정 위치에 위치해 있을때)에 navbar의 css 클래스를 변경시켜줘서 기본 display none인 nav bar를 css를 업데이트 시켜줘서 상단에 보이게하는등과 같이 구현할때 활용하면 좋은 예제이다.1. 웹페이지를 특정역역만큼 스크롤했을때는 compononentDidMount에서 스크롤 이벤트를 등록하고, onScroll 메소드를 활용해서 state를 스크롤할때마다 업데이트하여 이를 활용하는 방식으로 기능을 구현하면 된다.2.컴포넌트가 브라우저 상에서 특정..

React:svg 파일 컴포넌트로 만들어서 스타일링 하기 | 시작하기에 앞서 리액트로 개발을 하다보면, svg파일을 좀더 확장성 있게 사용하기 위해 부모컴포넌트에서 받아온 props에 따라 조건부 렌더링 (ex: 다른 배경색)을 해주고 싶을때가 있다. 각각의 svg파일을 색만 다를 뿐인데 파일을 여러개 만들어 import하면 비효율적이기 떄문이다. 따라서 아래와 같이 확장성 있게, svg 컴포넌트를 만들어 배경색만 props에 따라 바꿔주면 디자인 리소스도 줄어들게 될것이다. (ex) svg 파일을 넘어온 props에 따라서, 배경색이 다르게 보여주고 싶을때 | 해결방법 그럴때는 간단히 svg파일을 리액트 컴포넌트로 export 해주기만 하면 되고, 이러한 컴포넌트를 import 하고, 이 컴포넌트에 클..