Front (30) 썸네일형 리스트형 React - PureComponent & memo PureComponent가 Component와 다른점 shouldComponentUpdate()의 구현이 되어있다. 해당 컴포넌트의 props와 state가 바뀌어서 업데이트가 필요하다면 true를 리턴하고, 바뀌지 않았다면 false를 리턴해서 컴포넌트를 업데이트 하지 않는다. Shallow Comparison (얕은 비교) props와 state를 비교할때, 얕은 비교를 한다는 것은 reference를 비교한다는 것이다. 객체를 가지고 있다면 그 객체가 가지고 있는 어떤 데이터가 변경되더라도 객체가 변경되지 않았으니 같은 객체로 본다. 출처 ko.reactjs.org/docs/react-api.html#reactpurecomponent 얕은 비교를 위한 데이터 수정 방법 객체의 데이터 값만 수정하는 .. React - 디버깅 tip 렌더링되는 부분 표시 설정 컴포넌트가 렌더링 될때 업데이트되는 부분을 하이라이트로 표시해준다. 크롬 개발자도구에서 components를 클릭. (크롬 웹스토어에서 React Developer Tools 설치후) components의 설정에서 아래와 같이 체크박스 클릭. React - Dom과 컴포넌트에 접근하는 방법(Refs) React에서는 Dom에 접근할때, document.querySelector 와 같은 api를 사용하지 않고 Ref를 이용한다!! Ref 사용방법 Ref를 생성해서, 생성된 ref에 원하는 돔 엘리먼트를 저장 저장 후 this.(ref이름) 으로 사용. 아래 코드 참고! -------------------------------------------------------------------------------------------- Class textForm extends Component { inputRef = React.createRef(); // Ref생성 focusTextInput = () => { this.inputRef.current.focus(); } render() { return ( /.. React - 프로젝트 시작하기 (터미널명령어) & 컴포넌트 생성 및 작성 터미널 명령어 1. yarn으로 react-app 생성하기 프로젝트 폴더를 만들고자 하는 위치로 디렉토리를 설정하고 아래 명령어를 입력한다. >> yarn create react-app 프로젝트폴더명 2. 폴더를 통째로 복사하기 templete 폴더를 habit-tracker 로 복사한다. >> cp -R templete habit-tracker 2. 코드 열기 (편집기로) 코드를 열기를 원하는 프로젝트 폴더로 디렉토리를 설정하고 아래 명령어를 입력한다. >> code . 리액트 기본 폴더 구조 public 폴더 : 정적인 파일, static한 것들 src 폴더 : 동적 파일 (자바스크립트 코드), dynamic한 것들 * 웹팩에서는 빌드할때마다 자바스크립트의 유니크한 고유의 버전이 할당 된다. 그래서 .. 리액트 (클래스컴포넌트 vs 함수컴포넌트) 클래스 컴포넌트 state와 lifecycle methods가 있다. 함수 컴포넌트 state와 lifecycle methods가 없다. react16.8부터 React Hook을 도입하여 state와 lifecycle methods를 사용할 수 있도록 했다. 클래스 컴포넌트 대신 함수 컴포넌트를 사용하는 이유 (클래스 컴포넌트의 단점) 클래스 컴포넌트는 어렵다. 클래스 컴포넌트에는 this bind issue가 있다. functional programming을 이용하기 위해. lifecycle methods가 세분화 되어있어 코드를 중복으로 사용하는 경우가 발생했는데, 그 중복을 줄일 수 있다. 출처 드림코딩 엘리 - 리액트 4.1 강의 상속 (prototype) 기본 상속 (prototype) function Person(name, age){ this.name = name; this.age = age; } function Programmer(name, age, lan){ Person.call(this, name, age); // prototype을 추가해도 변수?들은 상속이 안된다. 기능만 된다. this.lan = lan; } Programmer.prototype = Object.create(Person.prototype); // 새 객체를 생성해서 prototype을 할당한다. // 새 객체를 생성하지 않고, Person.prototype을 그대로 넣으면, 추후 Programmer.prototype에 기능을 추가했을때, Person.prototype에도 같이.. 전역객체 / this & this의 제어 전역객체 (window/global) 모든 객체는 전역객체의 프로퍼티 이다. 전역객체의 이름은 호스트 환경에 따라 다를 수 있다. (웹브라우저 : window / node.js : global) function func(){ console.log('hello?'); } func(); window.func(); // 위의 코드와 실행결과가 같음. // 점(.)이 있고, 그 앞에 있는 것은 객체이며, func함수는 window객체 안의 메소드 이다. this 함수의 호출 맥락에 따라서, 상황에 따라서 달라진다. 함수나 메소드에서 this는 그 함수가 속해있는 객체를 가리킨다. 생성자에서의 this var funcThis = null; function Func(){ funcThis = this; } var o.. 객체의 생성 ( 생성자 & new ) 객체의 생성 var person = { 'name' : 'bolbbang', 'introduce' : function(){ return `my name is ${this.name}`; } } document.write(person.introduce()); //person.name = 'bolbbang' 으로 객체의 프로퍼티를 넣을 수 있지만, 객체를 정의하는 부분이 분산되므로 위와 같이 사용하는 것이 좋다. new ( 생성자 함수를 이용하여 객체 생성하기 ) function Person(){} // Person이라는 기본 함수 정의 var p0 = Person(); // p0 = undefined var p1 = new Person(); // p1 = {} // 함수에 new를 붙이면 그 return 값.. 이전 1 2 3 4 다음
