10. 전역(global) 데이터 공유 목차 context란? context객체 생성 클래스 컴포넌트에서의 Context 구독 함수 컴포넌트에서의 Context 구독 1. Context란? React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법 즉, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 여러 컴포넌트에서 값 공유 가능 Context가 쓰이는 상황 예시: 로그인한 유저 확인, 선호하는 언어 선택, 테마 선택 등 2. Context 객체 생성; React.createContext()메서드 Context 객체를 참조하고 있는 컴포넌트를 렌더링할 때 React는 트리의 상위에서 가장 가까이 있는 Provider로부터 현재값을 참조함 defaultValue 매개변수는 트리ㅍ 안에서.. 2022. 4. 29. 8. 조건부 렌더링 목차 논리 연산자 && 사용 삼항연산자 사용 조건식 작성 1. 한가지 조건만을 사용한 표현식 : 논리 연산자 && 사용 조건이 true일 경우 && 뒤의 expression이 출력 조건이 false일 경우 React는 && 뒤에 표현식을 무시하고 건너뜀 조건이 falsy일 경우, && 뒤에 있는 표현식을 건너뛰지만 falsy 표현식이 return 됨 1-1. 문법 condition && expression 2. 두가지 조건을 사용한 표현식 : 삼항연산자 사용 특수문자를 기준으로 끊어서 해석 가능 condition이 true이면(?) true를 return하고 아니면(:) false를 return 2-1. 문법 condition ? true : false 2022. 4. 28. 7. 이벤트 다루기 목차 React 엘리먼트에서의 이벤트 처리방식 JSX 콜백에서의 this bind() 호출없이 binding 방법 합성이벤트 속성 자주 쓰이는 합성 이벤트 1. React 엘리먼트에서의 이벤트 처리 방식 camelCase 사용 JSX 사용하여 함수로 이벤트 핸들러 전달 html의 form 엘리먼트의 retrun 속성이 false라 할지라도 기본 동작 방지 불가능 (= e.preventDefault() 메서드 반드시 호출해야 함) W3C 명세에 따른 합성 이벤트 정의하므로 브라우저 호환성 문제 없으나, 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않음 DOM 엘리먼트 생성 후, 이벤트 리스너를 추가하기 위해 addEventListener() 메서드 호출할 필요 없음 일반적으로, ES6 클래스 사용하여.. 2022. 4. 28. hook1. 기본 목차 hook의 도입 이유 hook이란? lint 규칙이란? hook을 사용하기 위한 환경 생명주기 메서드에 대한 hook의 처리 hook의 한계 1. hook을 도입하게 된 이유? 타언어와는 다른 JS에서의 this 키워드 작동 방식 > class 사용의 어려움 class 컴포넌트의 state 없이도 state 관련 로직 재사용 가능 컴포넌트를 생명주기 메서드 별로 쪼개는 것이 아닌, 연관된 기능에 기반한 더 작은 함수로 쪼갤 수 있음 즉 정리하자면, 함수형 컴포넌트에서 class 컴포넌트의 state 개념과 생명주기 method() 개념에 대응되는 기능들을 사용하기 위해서 hook을 도입하게 됨 2. hook이란? 함수형 컴포넌트에서도 state와 생명주기 개념을 사용할 수 있게 하는 함수 모음(인구.. 2022. 4. 26. React6. state와 불변성 목차 state란? 클래스 컴포넌트에 로컬 state 추가하기 state 업데이트 하향식 데이터 흐름 불변성 개념 1. state? 모든 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다는 규칙을 위반하지 않고도 사용자의 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경 가능 2. 클래스 컴포넌트에 로컬 state 추가하기 render() 메서드 호출 class constructor()메서드 호출하여 state 초기화 후 props를 기본 constructor에 전달 class Clock extends React.Component{ constructor(props){ super(props); this.state = {date: new Date().. 2022. 4. 14. 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. 이전 1 2 다음
