React/공식 문서 따라하기

Reat로 사고하기 React는 JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. React는 Facebook과 Instagram을 통해 확장성을 입증했습니다. React의 가장 쿨한 점은 앱을 설계하는 방식이다. 이번 섹션을 통해 React로 상품들을 검색할 수 있는 데이터 테이블을 만드는 과정을 진행해보자. 목업으로 시작하기 이 장에서 목업이라고 말하는 것은 나는 학부 과정 중 테스팅 과목을 들으면서 얼핏 배운적이 있다. mock 객체라고 해서 아직 완료하지 못한 경우 이를 테스트하기 위해 mock 객체를 붙여 테스트 한다고 알고 있는데 확실하진 않으니 따로 찾아보고 다시 글을 수정하도록 하겠다. 일단 JSON API와 목업을 디자이너로부터 받았다고 가정해보자. ..

합성 (Composition) vs 상속 (Inheritance) React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용해 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 이번 섹션에서 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제점과 합성을 사용해 이를 해결하는 방법을 살펴볼 것이다. 컴포넌트에서 다른 컴포넌트를 담기 Sidebar나 Dialog를 생각해보자. 우리는 이 안에 어떤 자식 엘리먼트가 들어와야할지 모든 것을 예상할 수 없다. 이러한 컴포넌트에는 children prop을 사용해 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다. 화면에 출력할 내용을 prop으로 받는 것이다. 아래 코드를 보자. function FancyBorder(props)..

State 끌어올리기 종종 동일한 데이터에 대한 변경 사항을 여러 컴포넌트에 반영해야 할 필요가 있습니다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 이런 일을 어떻게 할 수 있을지 지금부터 살펴봅시다. 이번 섹션에서는 주어진 온도에서 물의 끓는 여부를 판단하는 온도 계산기를 만들 것이다. 먼저 BoilingVerdict라는 이름의 컴포넌트부터 만들어보자. 이 컴포넌트는 섭씨 온도를 의미하는 celsius prop을 받아서 이 온도가 물이 끓는지 아닌지를 출력한다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would ..

폼 제어 컴포넌트 (Controlled Componenet) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 여기서 눈치챈 사람들도 많을 것이다. 자신의 state를 관리하면 되므로 클래스형 컴포넌트를 사용해 setState()로 상태를 업데이트 하면 된다. "제어 컴포넌트 (controlled component)"는 React에 의해 값이 제어되는 입력 폼 엘리먼트를 말한다. 아래 코드를 보며 제어 컴포넌트를 알아보자. class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange..

리스트와 Key 아래 코드는 JS에서 map() 함수를 사용해 numbers 배열의 값을 두배로 만들어 doubled 변수에 할당하는 코드이다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number * 2); React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일하다. 여러개의 컴포넌트 렌더링 하기 이전에 사용한 numbers 배열을 사용해 모든 값은 2배로 변환하여 리스트를 만들어보자. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map(number => { return ( {number * 2} ); }); ReactDOM.render({li..

조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있습니다. React에서 조건부 렌더링은 JS에서의 조건 처리와 같다. if나 switch 같은 조건 연산자를 사용해 조건에 맞는 컴포넌트를 렌더링 하면 된다. 아래 두 컴포넌트가 있다고 가정해보자. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up. } 이제 사용자의 로그인 상태에 맞게 위의 두 컴포넌트 중 하나를 보여주는 Greeting 컴포넌트를 만들자. function Greeting(prop..

이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. React 공식 문서에서 설명한 위의 내용을 아래 코드 예제로 확인해보자. HTML에서는 아래와 같다. Activate Lasers React에서는 어떤지 아래 코드를 보자. Activate Lasers 일단 onclick이 onClick으로 camelCase 형식으로 표기된 것을 한 눈에 볼 수 있다. onClick에 전달한 내용도 따옴표로 전달하지 않고 {}를 사용해 전달한다. 또 다른 차이..

state와 생명주기 이번 장에서는 우리가 전에 만들었던 tick 함수를 다시 살펴보도록 하겠다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleString()}. ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000); 이전에 우리가 배운 엘리먼트 렌더링은 매번 함수를 다시 호출해 React DOM이 DOM에 업데이트 하는 방식이었다. 이번 장에서 우리는 위의 tick 함수를 Clock 컴포넌트로 만들어 완전히 재사용하고 캡슐화하는 방법을 배울 것이다. Clock 컴포넌트는 스스로 타이머를 설정하고 매초 스스로 업..

Component and Props React에서는 컴포넌트를 사용해 UI를 재사용 가능한 개별적인 조각으로 나눈다. 컴포넌트는 JS에서 함수와 유사하다. 실제로 컴포넌트를 만들 때 함수형과 클래스형을 사용해 만든다. 컴포넌트는 "props"라고 하는 입력을 받아 화면에 표시할 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JS 함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } Welcome 함수는 props를 받아 엘리먼트를 반환한다. JS의 함수이기 때문에 "함수 컴포넌트"라고 부른다. ES6 이후 버전에서는 class를 지원하기 때문에 class 형으로도 컴포넌트를 만들 수 있다..

엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 화면에 표시할 내용을 가진다. cosnt element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이고, 쉽게 생성할 수 있다. React DOM은 우리가 생성한 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. 우리는 React DOM에 엘리먼트를 만들고, React DOM은 우리가 만든 엘리먼트를 자동적으로 브라우저 DOM에 업데이트 한다. 엘리먼트는 우리가 다음 장에서 배울 컴포넌트와는 다른 개념이다. 엘리먼트는 컴포넌트 내에 속하는 컴포넌트의 "구성 요소"다. DOM에 엘리먼트 렌더링 하기 React로 만든 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. 우리가 ..