ioh's Development

목차 React 컴포넌트 라이프사이클 이벤트 한눈에 살펴보기 이벤트 분류 이벤트 구현 모든 이벤트 실행하기 마운팅 이벤트 componentWillMount() componentDidMount() 갱신 이벤트 componentWillReceiveProps(newProps) shouldComponentUpdate() componentWillUpdate() componentDidUpdate() 언마운팅 이벤트 componentWillUnmount() React 컴포넌트 라이프사이클 이벤트 한눈에 살펴보기 React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 마운팅 이벤트 : React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가 할 때 발생한다. 갱신..

3장 까지만 볼려고 했는데 4장을 펼치는 순간! 만약 이 책에서 한 개 장밖에 읽을 수 없다면, 이 장을 읽기 바란다! 라고 하길래 본다 createElement() 나 JSX 을 이용해 컴포넌트를 다시 생성하지 않고, 사용자 조작으로 발생한 이벤트를 처리하여 뷰를 갱신해야 한다. 상태 객체를 이용하면 이런 문제를 해결할 수 있다. React 컴포넌트의 상태 객체를 이용하면 가치 있고 상호작용이 뛰어난 React 애플리케이션을 만들 수 있다. 상태는 React 컴포넌트에 데이터를 저장학, 데이터의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심 개념이다. React 컴포넌트의 상태란? React의 상태(state)는 컴포넌트의 변경 가능한 데이터 저장소다. 독립적이면서 기능 중심의 UI와 논리의 블록이다..

기억해야 할 주제 - JSX의 이해와 이점 - Babel을 이용한 JSX 변환 설정 - React와 JSX의 까다로운 부분 JSX의 정의와 장점 JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로, 특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다. 템플릿 엔진이나 HTML처럼 보일 수도 있지만 그렇지 않다. JSX는 React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 잇도록 도와준다. JSX 장점 개발자 경험(developer experience. DX) 개선 : 표현력이 뛰어나 코드를 읽기 쉽다. XML과 문법이 유사하여 중첩된 선언형 구조를 더 잘 나타낸다. 팀의 생산성 향상 : 전문 개발자 외에도 개발 지식이 있는 팀..

엘리먼트 중첩계층적 방식으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것이다.또는을 컨테이너로 사용하는 것이 일반적으로 좋은 선택이다. createElement()에 전달하는 매개변수의 수는 제한이 없다. 두 번째 매개변수 이후의 모든 매개변수는 자식 엘리먼트가 된다. React 개발자 도구에서 확인해보면 두 엘리먼트가 같은 계층에 위치한다. 문자열로 작성한 일반적인 HTML태그, 예를 들면 'h1', 'div', 'p'처럼 화살괄호가 없는 문자열이다. 이름은 소문자로 작성한다.React 컴포넌트 클래스 객체. HelloWorld를 예로 들 수 있다. React 컴포넌트 클래스의 이름은 대문자로 시작한다. React는 표준 HTML 요소를 탐색해서 일치하는 것이 있으면 해당 React 엘..

더보기React는 강력한 UI 라이브러리다. 페이스북, 넷플릭스, 에어비앤비 같은 유명 기업들도 React를 기반으로 성공을 거두었다. 자바스크립트로 만든 React 컴포넌트는 웹 사이트 어디서든 UI를 재사용할 수 있다. React란? React는 UI 컴포넌트 라이브러리다. React UI 컴포넌트는 다른 특별한 템플릿 언어가 아닌 자바스크립트를 이용해서 만든다. 여러 컴포넌트로 UI를 구성하는 이런 방식은 React의 핵심 철학이다. React UI 컴포넌트는 매우 독립적이며 특정 관심사에 집중된 기능 블록이다. 예시로 날짜선택기, 캡차, 주소, 우편번호 요소를 위한 컴포넌트가 있을 때 이런 컴포넌트는 시각적 표현과 동작을 구현하는 논리를 모두 담고 있다. 또 다른 컴포넌트는 서버와 직접 통신하기도..