![]()
● 라이프사이클 메서드의 이해 라이프사이클은 크게 세 가지, 마운트, 업데이트, 언마운트 카테고리로 나눕니다. 우선 어떤 것들이 있는지 간단히 알아보고 큰 흐름을 이해한 후 하나씩 살펴보는 것으로 하자. 마운트 : DOM이 생성되고, 브라우저 사엥 나타나는 것을 마운트라고 한다. constructor getDerivedStateFromProps (derived from: ~에서 파생되다.) render componentDidMount 업데이트 : 컴포넌트는 다음과 같이 4가지 경우에 업데이트된다. props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링될 때, this.forceUpdate로 강제로 렌더링 될 때 getDerivedStateFromProps shouldComponentUpd..
![]()
● ref는 어떤 상황에 사용해야할까? 직접적으로 DOM을 다뤄야할 때 사용해야한다. (즉 DOM을 참조해야할 때) 컴포넌트 인스턴스에 대한 참조를 해야할 때 컴포넌트 간의 참조를 공유해야할 때 사용한다. 왜 쓰는지에 대한 이유와, 실제 ref라는 것이 JavaScript에서 어떤 기능을 대체한 것인지에 대해서 생각해보니, 우리는 HTML에서 직접적으로 id를 추가해주고, 그 id를 가진 DOM 요소를 조작했었는데, 리액트에서는 그런 기능을 권장하지 않는다. 왜냐하면 리액트의 virtual DOM을 우회하는 것이기 때문에 권장하지 않는다는 것이다. 어차피 DOM 요소가 변한 부분이 있다면 virtual DOM으로 비교해서 필요한 부분만 렌더링 해주는데, 직접적으로 접근한다면 불필요한 렌더링이 생길 수 있..
● 리액트의 이벤트 시스템 ⚬ 이벤트 사용시 주의할 점 이벤트 이름은 카멜 표기법으로 작성한다. onClick, onChange, onKeyUp••• 이벤트에는 함수 형태의 값을 전달한다. onClick={ ( ••• )=>{ ••• } } DOM 요소에만 이벤트를 설정할 수 있다. 컴포넌트에는 이벤트를 달 수 없다. 이렇게 적으면 onClick인 props 를 전달해주는 것임 ⚬ 이벤트 종류 Clipboard Composition keyboard Focus Form Mouse Selection Touch UI Wheel Media Image Animation Transition ● onChange 이벤트 실습하기 ⚬ 클래스 컴포넌트 실습 import { Component } from "react"; ..
리액트에서 컴포넌트는 함수형 컴포넌트와, 클래스형 컴포넌트로 나눌 수 있다. 클래스형 컴포넌트에서는 state 기능, 라이프사이클 API 기능을 사용할 수 있습니다. 함수형에서는 state와 라이프사이클 AP를 사용할 수 없습니다. 하지만 Hooks라는 기능이 도입되면서 해결되었습니다. ● 함수형 컴포넌트, props, propTypes import "./App.css"; function App() { return 안녕하세요? 함수형 컴포넌트 입니다.; } export default App; props는 아래와 같이 적어줍니다. App.js import MyComponent from "./MyComponent"; function App() { return ( 안녕하세요? 함수형 컴포넌트 입니다. ); }..
![]()
● 리액트란 왜 탄생했을까? 옛 시절,, 넷스케이프라는 브라우저에서 다양한 브라우저가 생긴 뒤 큰 혼돈을 겪고 ECMAscript가 이 혼돈을 잠재운 뒤, 지금의 자바스크립트가 되었습니다. 자바스크립트는 오로지 웹브라우저에서 간단한 연산과 시작적인 효과만 주는 언어에 불과했지만 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 하게 되었습니다. 이제는 자바스크립트 만으로도 규모가 큰 어플리케이션 개발이 가능하게 된 것이죠. 하지만 오로지 '자바스크립트' 만으로 대규모 어플리케이션을 개발할 수 있을까요? 그건 좀 어려워 보입니다. 그래서 생긴 것이 다양한 프레임워크인데요. Angular, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, Pu..
