본문 바로가기

React 자습서

Part 12-10. 리액트 살펴보기(합성(Composition) vs 상속(Inheritance)) 합성과 상속은 객체 지향에서 기능의 재사용을 하기 위해 사용하는 대표적인 기법입니다. 리액트는 합성 모델을 가지고 있으며 상속 대신 합성을 사용해 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 상속(Inheritance) 다른 부모 클래스를 먼저 만든 후 자식 클래스가 부모의 클래스를 상속받습니다. IS-A 관계 합성(Composition) 서로 다른 객체를 여러 개 붙여서 새로운 기능이나 객체를 구성합니다. 일반적으로 합성할 클래스를 변수에 할당 후 사용하는 구조입니다. 상속과는 다르게 클래스간의 유기적으로 서로의 클래스를 융통성 있게 합성할 수 있습니다. HAS-A 관계 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인.. Today Learning _ 2020. 3. 24.
Part 12-9. 리액트 살펴보기(state 끌어올리기) 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때가 있습니다. 이럴 때 가장 가까운 공통 상위의 state를 끌어올리는 것이 좋습니다. 주어진 온도에서 물의 끓는 여부를 추정하는 온도 계산기 만들기 BoilingVerdict라는 이름의 컴포넌트를 만듭니다. 이 컴포넌트는 섭씨 온도를 의미하는 celsius prop을 받아서 온도고 물이 끓기에 충분한지 여부를 출력합니다. 해당 컴포넌트는 if문을 통해 celsius가 100도 이상일 때 return 값으로 물이 끓는다는 것을 나타냅니다. 아닐 경우에는 물이 끓지 않고 있다는 문구를 출력합니다. 그다음으로 Calculator라는 컴포넌트를 만듭니다. 이 컴포넌트는 온도를 입력할 수 있는 을 렌더링하고 그 값을 this.state.tempera.. Today Learning _ 2020. 3. 24.
Part 12-8. 리액트 살펴보기(Form) HTML의 폼 엘리먼트는 자체가 내부 상태를 가지기에 React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 위의 폼은 사용자가 제출하면 새로운 페이지로 이동하는 동작을 수행합니다. React에서 동일한 동작을 원한다면 그대로 사용해도 괜찮습니다. 하지만 대부분 Javascript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다. 이를 위한 표준 방식이 "제어 컴포넌트(controlled components)"라고 불리는 기술을 이용하는 것입니다. 제어 컴포넌트(Controlled Component) HTML에서 input, textarea, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. .. Today Learning _ 2020. 3. 21.
Part 12-7. 리액트 살펴보기(리스트와 Key) Javascript에서 리스트를 변환하는 법 아래는 map() 함수를 이용해 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드입니다. 리액트에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일합니다. 여러 개의 컴포넌트 렌더링 하기 엘리먼트 모음을 만들고 중괄호 {}를 이용해 JSX에 포함시킬 수 있습니다. Javascript map() 함수를 사용해 numbers 배열을 반복 실행합니다. 각 항목에 대해 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장합니다. 이후 listItems 배열을 엘리먼트 안에 포함한 후 DOM을 렌더링 합니다. 기본 리스트 컴포넌트 일반적으로 컴포넌트 안에서 리스트를 렌더.. Today Learning _ 2020. 3. 19.
Part 12-6. 리액트 살펴보기(조건부 렌더링) React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 애플리케이션의 상태에 따라 컴포넌트 중 몇 개 만을 렌더링 할 수 있습니다. 리액트에서 조건부 렌더링은 Javascript에서의 조건 처리와 같이 동작합니다. if나 조건부 연산자와 같은 Javascript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데 사용할 수 있습니다. 이후에 리액트는 현재 상태에 맞게 UI를 업데이트해서 보여줄 것입니다. 아래의 두 컴포넌트가 있습니다. 이 코드를 보면 Greeting 컴포넌트에서 UserGreeting 컴포넌트와 GuestGreeting 컴포넌트를 if문의 결과 값에 따라 사용한다는 것을 알 수 있습니다. 변수 isLoggedIn의 값이 true일 경우 UserGreeting의 값이 나타.. Today Learning _ 2020. 3. 19.
Part 12-2. React 살펴보기(엘리먼트 렌더링) element는 React 앱의 가장 작은 단위입니다. 또한 화면에 표시할 내용을 기술하기도 합니다. const element = Hello, react! ; 브라우저 DOM 엘리먼트와 달리 React는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. ** 컴포넌트와 엘리먼트를 혼동할 수 있지만, 엘리먼트는 컴포넌트의 구성 요소이다. DOM에 엘리먼트 렌더링 하기 HTML 파일에 id가 root인 div가 있습니다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기에 이것을 ROOT DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려.. Today Learning _ 2020. 3. 14.
Part 12-1. React 살펴보기(JSX의 이해) REACT란? - 컴포넌트 기반의 아키텍처 = 템플릿 언어가 아닌 자바스크립트로 컴포넌트를 작성한다. = 특정 관심사에 집중된 기능 블록. 즉, 관심사를 분리할 수 있다. 여기서 관심사는 컴퓨터 프로그램 코드에 영향을 주는 일련의 정보를 의미한다. "애플리케이션의 하드웨어 세부 사항"이나 "인스턴스화 할 클래스 이름"과 같은 것. - JSX 사용 - Virtual DOM - 단방향 데이터 흐름을 지향 JSX란? const element = Hello, world! ; 위의 태그 문법을 JSX라 부르며 Javascript를 확장한 문법이다. JSX라고 하면 템플릿 언어라고 생각할 수 있겠지만 Javascript의 모든 기능이 포함되어 있다. 그리고 React 엘리먼트(element)를 생성한다. React.. Today Learning _ 2020. 3. 14.

티스토리툴바