React (6) 썸네일형 리스트형 React 공식문서 톺아보기 (feat.코어 자바스크립트) 리액트 개발자들은 공부를 시작한 순간, 심화 기술에 대한 레퍼런스 참고 시, 새로운 버전이 출시되면 어김없이 공식문서를 찾게 된다. 수 많은 테크 블로그들의 정보와 비교해 가장 심플하고 가장 직관적이며 가장 정확한 정보를 가지고 있기에 뗄레야 뗄 수 없다. 필자는 최근 한 동안 코어 자바스크립트 공부에 빠져 실행 컨텍스트, 스코프, 비동기에 대한 기본기를 다졌다. (이에 대한 내용은 느낀 바가 많아 정리 후 포스팅 할 예정이다) 자바스크립트 엔진이 동작하는 방식을 이해하고 다시 읽는 공식문서는 좀 색달랐다. 예전에는 그저 페이스북이 정한 법칙대로. 로마에 왔으면 로마의 법을 따르라는 것 마냥 "그냥 그렇게 써야 돼"로 문서를 받아들였다면, 지금은 "로컬 state를 적용하기 위해서 왜 function 컴.. React #4. Lifecycle Hook vs useEffect React의 Lifecycle이란? 리액트는 컴포넌트 기반으로 설계된 라이브러리이다. 리액트에서 우리가 만드는 컴포넌트는 React에서 각각의 컴포넌트는 생명주기(Lifecycle)를 가진다. 즉, 컴포넌트도 인생이 있다는 것이다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. Lifecycle은 크게 세 가지 유형으로 나눌 수 있는데, 특히 업데이트가 되는 시점에 props, state를 통한 상태 관리가 필요하므로 주목하길 바란다. - 생성(mount) DOM이 생성되고 웹 브라우저 상에서 나타날 때 - 업데이트(update) props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제 렌.. React #3. Props와 State 리액트의 기초 지식 중의 가장 핵심, Props와 State를 다뤄보겠다. Props 함수형 컴포넌트 vs 클래스형 컴포넌트 - 함수형 : 초기 마운트 속도가 미세하게 더 빠르다. 클래스형 컴포넌트에 비해 메모리 자원을 덜 사용한다. State state 내부 값은 직접 수정이 불가능하다. 불변성을 유지해야 한다. 이는 JS Immutability 개념을 참조하길 바란다. push, slice, *map, filter map : key 고유 값으로 구분. 배열을 렌더링 하게 될 때에는 꼭 고유값을 key 로 사용해야 한다. 불변성 유지를 위하여 데이터를 조작 할 때에는 기존의 배열을 건들이지 않는 방식으로 처리해야 한다. 만약 state 배열 값을 무작위로 변경하게 되면 필요치 않은 값 변경을 통해 프로.. React #2. JSX 소개 아래 변수 선언을 참조해보자. const element = Hello, world!; 이 태그 구문은 문자열이나 HTML이 아니다. JSX라고 부르는 JavaScript의 확장 구문이다. 쉽게 말해서 JavaScript와 HTML을 합쳐놓은 문법이다. JSX는 React의 요소(Element) 를 생성한다. (createElement) 경고: JSX는 HTML보다 JavaScript에 더 가깝기 때문에 React DOM은 camelCaseHTML 속성 이름 대신 속성 이름 지정 규칙을 사용한다. (ex) class --> className, tabindex --> tabIndex. JSX의 중괄호 안에 JavaScript 표현식을 넣을 수 있다. 아래의 예에서는, 자바 스크립트 함수 호출의 결과를 중괄호.. React #1. 리액트란 무엇인가 React는 Facebook이 만든 현재 가장 핫한 프론트엔드 라이브러리이다. 마치 2006년, 처음으로 jQuery가 나왔을 때의 인기가 이 정도였을까? 개발자들은 왜 React에 이렇게 열광할까? 포스팅에 앞서 React가 정확히 무엇인지, 왜 필요한지에 대해서 알아보자. 사실 단순한 정적 웹 사이트를 구현하기 위해서는 별도의 프론트엔드 라이브러리가 필요하지 않다. HTML, CSS만으로도 만들어 낼 수 있다. 여기에 JavaScript를 더하면 사용자의 행동 흐름에 따라 동적으로 웹 사이트를 표현할 수 있다. 하지만 요즘의 Web은 단순히 컨텐츠를 노출해주는 웹 페이지가 아닌 웹 애플리케이션이다. 브라우저 상으로도 JavaScript를 통해 자연스러운 흐름을 나타낼 수 있지만 UI를 동적으로 나타내.. React 공부 시 참고해야 할 5가지 SPA가 생겨나면서 React.js, Angular, Vue가 큰 주목을 받고 있다. 그 중에서도 Facebook이 제공하는 오픈 소스 라이브러리 React는 현업에서 가장 많이 쓰이고 있고, 기존의 JavaScript 개발자들의 큰 생산성 향상에 기여하고 있다. SPA (Single Page Application) 차세대 패러다임. 단일 페이지 어플리케이션은 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는것이 아니라 최초 한번 페이지 전체를 로딩한 후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션 -> Angular, Vue, React가 생겨난 배경 필자 또한 React를 접하게 된 지 그리 길지 않아 능숙하지는 않지만, 학습 과정에서 여러 가지 방법들을 거쳐보면서 이렇게 공부.. 이전 1 다음
