본문 바로가기

전체 글139

PureComponent와 Component의 차이 PureComponent와 Component의 차이 React.PureComponent는 사실 React.Component와 비교해서 딱 한가지만 다르다 react의 생명주기 메서드중 하나인 shouldComponentUpdate를 어떻게 쓰는가 하는 부분이다. shouldComponentUpdate() shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본적으로 shouldComponentUpdate() 메서드의 return값은 true 인데 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다. component : shouldComponentUpdate React.Comp.. 2021. 1. 4.
State & Props 정의 가장 명확하게 설명해 둔 글 같아서 기록해둔다. 여기 저기서 정의한 내용보다 훨씬 낫다. 1. State 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트 입니다. 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출하죠. 이 부분은 아마 제가 개념 설명을 할때 많이 얘기 해서 잘 아실것 같아요 🙌 2. Props 컴포넌트 밖에서 주어지는 데이터 입니다. 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 State와는 다르게, Props은 컴포넌트 외부에서 데이터를 제공받습니다. 가장 근본적인 이유는 컴포넌트의 재사용을 높이기 위해서죠 :) 상황에 따라 주어진 데이터를 .. 2020. 12. 21.
React Hook이 생긴 이유... 리액트 = Component 만드는 방법은 Class, Function으로 만들 수 있다. 주기적으로 업데이트하기 위해서 Class에서 할 수 있는데, Class에서는 State라는 Object가 있어서 값이 변할 때마다 재 호출이 가능하다. 이 State는 Component 상태 값을 표현해서 생명주기 (Lifecycle Methods)를 관리하는 것이 가능하다. Function에서는 State 같은 것이 없었다. 그런데 React Hook 이 class에서 lifecycle을 관리하는 것과 똑같은 기능을 지원하는 것이 생겼다. (React ver 16.8) 생긴 이유는 Script를 다루던 개발자들이 Class 이해를 어려워해서 똑같은 기능이 생긴 것이다. (class is difficult...?... 2020. 12. 17.
Print 기능 구현 방법 (영역인쇄, javascript) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 인쇄할 버튼을 만들고 버튼을 클릭하면 인쇄가 되도록 구현하였다. #첫번째시도 window.print() => header 부분을 비롯하여 모바일에서 설정된 영역까지 인쇄된다. 문제가 심각하다. 영역을 설정해서 인쇄하는 방법을 찾기 시작했다. #두번째시도 0. document.body를 따로 저장해둔다. 1. 인쇄할 영역을 querySelector로 잡는다. 2. 인쇄하지 않을 영역을 querySelector로 잡는다... 2020. 12. 3.
php 와 javascript 차이 & 상호 간의 호출 방법 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com php 언어는 대표적인 서버 사이드 스크립트 언어중 하나입니다. 즉, 서버에서 실행되는 언어입니다. 서버에서 실행되는 언어라는 의미를 이해하기 위해서는 우선, 서버에 대해서 알아야할 것 같습니다. 우와 그래서 Server가 뭐야~ 예 그렇습니다. 서버는 어떤 '업무'를 수행하기 위해 설정되어있는 컴퓨터라고 볼 수 있습니다. 여러분이 웹 사이트를 하나 운영한다고 해보겠습니다. 이처럼 Client로 부터 요청이 오면 Se.. 2020. 11. 20.
addEventListener 이벤트리스너 종류 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 출처: https://abc1211.tistory.com/201 addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 오늘 코드하다가 resize를 처음 써보면서 이런 것도 있다 싶어서 정리해둔다. MDN 보니까 신기한 게 많다. 자주쓰는 건 몇 개 없겠지만, 알면서 안쓸 필요는 없겠지. 자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 .. 2020. 10. 23.

티스토리툴바