본문 바로가기

프로그래밍/React

 (4)
[React 요약 정리] 4. React 컴포넌트 라이프사이클 이벤트 4. React 컴포넌트 라이프사이클 이벤트1) 개요- React는 라이프사이클 이벤트를 기반으로 컴포넌트 동작 제어, 사용자 정의 가능- 모든 React 컴포넌트는 라이프사이클 이벤트가 존재- 종류마운팅 이벤트: React 엘리먼트를 DOM 노드에 추가 시 발생갱신 이벤트: React 엘리먼트 갱신 시 발생언마운팅 이벤트: React 엘리먼트를 DOM에서 제거 시 발생 2) 이벤트 종류- 마운팅componentWillMount(): DOM 삽입 전 실행 // 라이프 사이클 중 1회만 실행componentDidMount(): DOM 렌더링 완료 후 실행 // Fetch API의 XHR요청 작성 가능 - 갱신componentWillReceiveProps(nextProps): 컴포넌트가 속성을 전달받기 직전..
[React 요약 정리] 3. JSX 3. JSX1) JSX 개요- JSX: 함수 호출과 객체 생성을 위한 문법적 편의를 제공- 장점: 뛰어난 표현력, 생산성 향상, 코드량 감소, 문법 오류 감소 2) JSX 사용- 사용 예시ReactDOM.render(React.createElement('h1', null, 'Hello world!'), document.getElementById('content'))↓↓ JSX로 작성시 ↓↓ReactDOM.render(Hello world!,document.getElementById('content')) - JSX 문법으로 작성한 객체도 변수에 저장 가능let hw = Hello world!ReactDOM.render(hw, document.getElementById('content')) 3) React ..
[React 요약 정리] 2. React 기초 2. React 기초1) 용어- 엘리먼트: 컴포넌트의 인스턴스, 컴포넌트 클래스 2) 특징- React 엘리먼트를 에 직접 렌더링하지 않는다.(충돌 위험)- 경고와 오류 메시지가 제공 3) React.createElement 메소드- 엘리먼트 생성 메소드- 전달하는 매개변수의 제한 없음- React.createElement(elementName, data, child)elementName: 태그명 or 컴포넌트 클래스 객체data: 속성 or 상위 컴포넌트에서 받는 값child: 자식 엘리먼트 or 태그 내부에 작성하는 텍스트 - 예시React.createElement('h1', null, 'Hello world!') - 코드 간소화React.DOM.h1(null, 'Hello world!) - 코드 간..
[React 요약 정리] 1. React 개요 1. React 개요1) React란?- React: UI 컴포넌트 라이브러리*UI 컴포넌트 라이브러리: 매우 독립적이며 특정 관심사에 집중된 기능 블록- 효율적인 프론트 엔드 개발을 위한 새로운 방식 제시- 페이스북, 넷플릭스, 에어비앤비 등의 기업에서 React 활용- 공식 웹사이트 설명: '변화하는 데이터를 다루는 거대한 어플리케이션 개발'의 문제 해결 2) React의 장점- 단순한 앱 개발선언형 스타일: 명령형 스타일에 비해 코드에 대한 이해도와 가독성 증가, UI 요소를 선언형 스타일로 작성한 후 뷰에 변경이 발생하는 경우 React가 스스로 갱신*예시var arr=[1,2,3,4,5], arr2=arr.map((v, i)=> v*2)console.log(arr2);결과 => (5) [2, 4..

티스토리툴바