React4-2. 컴포넌트(2) 목차 컴포넌트의 생명주기 도표 인스턴스 생성(Mounting) 시 호출되는 메서드들 업데이트(Update) 시 호출되는 메서드들 인스턴스 제거(Unmounting) 시 호출되는 메서드들 자주 사용되는 생명주기 메서드( render() / contructor() / componentDidMount() ) 생명주기에 따른 코드 실행예시 1. 컴포넌트 생명주기 모든 컴포넌트는 각 생명주기에 따른 다양한 메서드를 보유한다 이 메서드를 선언하여 특정 시점(컴포넌트가 마운트되거나 언마운트되는 시점)에 코드가 실행되도록 설정 가능하다 -컴포넌트의 생명주기 인스턴스 생성(Mounting) 업데이트(Update) 인스턴스 제거(Unmounting) 2. 생성(Mounting) 컴포넌트의 인스턴스가 생성되어 DOM에 삽입.. 2022. 4. 14. React 4-1. 컴포넌트(1) 목차 컴포넌트란? 컴포넌트의 유형? class로 정의된 컴포넌트 함수로 정의된 컴포넌트 컴포넌트 렌더링 컴포넌트 합성 컴포넌트 추출 1. 컴포넌트란? UI를 독립적이고 재사용 가능한 여러 조각으로 나누는 것 컴포넌트는 엘리먼트를 함수나 클래스에 담는 행위 결과물을 JSX로 반환 개념적으로 JS 함수와 유사 props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는 지를 기술하는 React 엘리먼트(리액트가 이해할 수 있는 객체)를 반환 2. 컴포넌트의 유형 class 함수 3. ES6 class로 정의된 컴포넌트 class로 정의된 컴포넌트는 보다 많은 기능을 제공함 React 컴포넌트 class 정의를 위해서는 React.Component를 상속받아야 함 React.Component의 하위 cl.. 2022. 4. 14. React3. ReactDOM.render() 목차 React 엘리먼트? DOM에 엘리먼트 렌더링하기: ReactDOM.render() 메서드 DOM에 렌더링된 엘리먼트 업데이트하기 변경된 부분만 업데이트 - 특정 시점의 UI 변화에 대해 고민하는 접근법 1. React 엘리먼트 React 앱의 가장 작은 단위이며, 화면에 표시할 내용을 기술함 일반 객체 불변객체(엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가) 엘리먼트는 특정 시점의 UI를 보여줌 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 함 2. DOM에 엘리멘트 렌더링하기 React 엘리먼트를 container DOM에 렌더링 현재 ReactComponent 루트(root) 인스턴스에 대한 컴포넌트에 대한 참조를 반환 즉, 생성한 React 엘리먼트를 루.. 2022. 4. 13. React 2. JSX? 목차 JSX란? JSX로 변수 선언 JSX에서 JS표현식 사용하기 JSX로 속성 정의하기 JSX로 자식 정의하기 JSX로 React 엘리먼트(객체) 생성 JSX에서 주석 작성하기 1. JSX란? JSX는 템플릿 언어라기 보다는 자바스크립트 문법의 확장이다. 리액트 '엘리먼트'를 생성한다. 리액트에서는 기본적으로 렌더링 로직이 UI 로직과 연결 된다는 사실이 깔려있다. 별도의 파일에 마크업과 로직을 넣어서 기술을 인위적으로 분리하기보다는, 마크업과 로직 둘을 포함하는 '컴포넌트'로 관심사를 분리한다 (대충 컴포넌트 안에 HTML과 JS를 한꺼번에 작성 가능하다는 뜻) 2. JSX로 변수 선언 const element = I'm considering dropping this class; 3. JSX에서 JS.. 2022. 4. 12. React 1. 용어 및 기본 개념 목차 React란? 프레임 워크와 라이브러리의 차이는? 리액트를 사용하기 위한 라이브러리 React 기술 용어 1. React란? 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 - 공식 문서 웹프레임 워크 - 위키 2. 프레임 워크와 라이브러리 차이? 개발자들은 종종' 라이브러리'와 '프레임워크'라는 용어를 혼용해서 쓴다. 프레임워크와 라이브러리는 누군가에 의해 쓰여진 코드를 재사용한다는 점에서 공통점이 있지만 몇 가지 큰 차이점이 있다. 그 차이에 초점을 맞춰보자. 라이브러리와 프레임 워크의 기술적 차이점은 제어 반전(=제어의 역전, 역제어)이라 불리는 용어에 있다. 라이브러리를사용 할때, 개발자는 어플리케이션 flow를 관리할 수 있으며 언제, 어디에서 라이브러리를 사용할 지 .. 2022. 4. 12. 이전 1 2 3 4 5 다음
