[React - 기초] Hooks
·
React/패스트캠퍼스
1. Hooks? Class 컴포넌트의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 함 Class 컴포넌트의 단점으론 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. Class 컴포넌트의 로직을 재사용하는 방법은 불가능한 것은 아니다. 하지만 render props, 고차 컴포넌트 같은 패턴을 사용해서 해결해야 했다. 그래서 Hook은 좀 더 편하게 상태 로직을 재사용할 수 있도록 도와준다. 2. 복잡한 컴포넌트들은 이해하기 어렵다. 데이터를 가지고 오는 작업을 componentDidMount에서 일어날 때가 있고 componentDidUpdate에서 일어날 때가 있었다. 즉, 관련이 있는 코드는 분리되지만, 관련 없는 코드들은 단일 메서드로 결합되어있다. 그것으로 인해서 버..
[React - 기초] JSX, Babel
·
React/패스트캠퍼스
1. JSX 문자도 HTML도 아닌 JavaScript의 확장 문법 const text = "Hello, world!"; const textClass = "title" const element = {text} React 개발을할 때 JSX는 필수가 아니다. 하지만 시각적으로 더 도움이 된다. 2. Babel JavaScript Complier로 React 언어를 JavaScript가 이해할 수 있게 해석해주는 프로그램이다. const text = "Hello, world!"; const textClass = "title" const element = {text} = // 바벨처리 => const text = "Hello, world!"; const textClass = "title"; const elem..
[React - 기초] DOM, Element
·
React/패스트캠퍼스
1. DOM? Document Object Model의 약자이며, XML이나, HTML 문서에 접근하기 위한 인터페이스라고 보면 된다. 위와 같은 계층 구조로 나타나 있으며, 자바스크립트를 사용해서 문서의 요소를 변경, 수정, 삭제할 수 있다. 2. Element html 태그를 사용하지 않고, 자바스크립트로 직접 만들 수 있다. 이것을 React에서 어떤 방식으로 사용할까? 3. React에서의 Element 다루기 보는 바와 같이 React에서도 Element를 생성, 수정을 할 수 있다.