[번역] React ES6 — Class constructor에서의 super() 본 글은 http://cheng.logdown.com/posts/2016/03/26/683329를 한국어로 번역한 글입니다. medium.com

변경 이유 초기 렌더링을 제어하는 방법이 많아져서 혼란이 됨. 오류 처리 인터럽트 동작시에 메모리 누수 발생할 수 있음. React 커뮤니티에서도 가장 혼란을 야기하는 라이프 사이클 React v16.3 이후에 변경된 부분 componentWillMount, componentWillReceiveProps, componentWillUpdate를 v17 부터 사용불가 componentWillReceiveProps 대체 메서드 추가 getDerivedStateFromProps componentWillUpdate 대체 메서드 추가 getSnapshotBeforeUpdate componentDidCatch 컴포넌트 에러 핸들링 API 추가 리액트 교과서 - 컴포넌트와 라이프사이클 이벤트 React 컴포넌트와 라이..

업데이트(갱신, Update) 이벤트 컴포넌트 내부의 state나 props가 변경이 되면 업데이트 이벤트가 발생하며 리렌더링 된다. 컴포넌트가 업데이트 될 때, 다음과 같은 메서드가 실행된다. new Props / setState() / forceUpdate() getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate New Props 상위 컴포넌트로부터 갱신된 props를 받는 경우가 있다. 이 때, 갱신된 props를 받은 컴포넌트들은 다시 렌더링되며, update cycle을 진행하게 된다. setState 컴포넌트들은 공통적으로 setState() api를 제공한다. 현재 자신이 ..

서론 React는 라이프사이클(생명주기, Lifecycle) 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 이러한 라이프사이클을 이용하여 우리는 React를 사용해, UI를 화면에 보이게 하고, UI를 업데이트 또는 교체하며, UI를 화면에서 제거할 수 있다. React 라이프사이클 이벤트 라이프사이클 이벤트를 분류해보면 다음과 같다. 마운트(생성, Mounte) 이벤트: React 엘리먼트를 DOM 노드에 추가할 때 발생한다. 업데이트(갱신, Update) 이벤트: 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생한다. 언마운트 (제거, Unmount) 이벤트: React 엘리먼트를 DOM에서 제거할 때 생긴다. 마운트(생성, Mounte) 이벤트 컴포넌트 함수가..

1. 어떤 상황에서 함수형 컴포넌트와 클래스형 컴포넌트 둘 중 무엇을 사용하는 것이 좋을까? 2. 왜 render가 두 번 실행되는 것인가? 3. [{...}, {...}, ...] 이런 구조로 작성된 state는 props로 data라는 이름을 써야하던데, 이런 구조가 여러 개일 경우에는 어떻게 해야 하는가? 4. 컴포넌트는 얼마나 무엇을 기준으로 얼마나 쪼개야 하는가? 5. css는 각 컴포넌트 마다 파일을 따로해주어야 하는가? 1. 함수형 컴포넌트 스타일에 관해. 2. React Life Cycle 이란? 3. hook란 무엇이며 왜 생겨났는가? X. redux란 무엇이며 왜 생겨났는가?

JSX 소개 JSX는 Javascript를 확장한 문법입니다 UI가 어떻게 생겨야 하는지 설명하는 역할을 합니다 JSX 규칙 1. 태그가 비어있다면 />을 이용해 태그를 바로 닫아주어야 합니다. 2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다. 3. 태그를 작성 할 때 이름 없이 작성하면 Fragment가 만들어 집니다. Hello, React!! 안녕하세요 Hello, React!! 안녕하세요 4. Javascript 표현식을 사용할 때는 중괄호{ }를 이용합니다. const name = 'Josh Perez'; const element = Hello, {name}; 5. class는 className으로 표기해야 합니다. 6. 주석은 {/* */} 형태로 작성해야 합니다.

props React의 props는 HTML의 attribute와 유사합니다. 예를 들어, "brand" attribute를 "Car" element에 추가해봅시다. const myelement = ; 그럼 컴포넌트는 argument를 props object 처럼 받습니다. 아래 코드는 컴포넌트에서 "brand" attribute를 사용하는 모습입니다. 부모 컴포넌트로 부터 전달 받은 props는 하위 컴포넌트에서 this.props 라는 구문으로 사용가능합니다. class Car extends React.Component { render() { return I am a {this.props.brand}!; } } 컴포넌트가 일반적인 자바스크립트의 함수라면, props는 함수의 입력값(input)이 됩니..

컴포넌트(Component) 컴포넌트는 UI를 구성하는 독립적이고 개별적인 아주 작은 개체(entity)입니다. 이러한 컴포넌트들은 각각의 코드와 구조, API가 있습니다. 컴포넌트들을 모아서 UI(User Interface)를 구현하고 UI들은 사용자에게 View라는 형태로 제공됩니다. 컴포넌트의 장점은 코드를 재사용 가능하다는 것입니다. 컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 집니다. 함수형 컴포넌트 function App(props) { return Hello, {props.name}; } 클래스형 컴포넌트 class App extends Component { render() { return Hello {this.props.name}; } } 컴포넌트의 이름은 항상 대문자로 ..