React

리스트와 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 노드가 있다. 우리가 ..

JSX const element = Hello World!; 위의 문법이 무엇으로 보일까? JS?? HTML?? 아니면 그냥 문자열?? 위의 문법은 JavaScript를 확장해서 만든 JSX라고 한다. JS를 확장했기 때문에 JS의 모든 기능을 사용할 수 있고, 위의 문장처럼 HTML 태그를 사용해서 표현할 수도 있다. 위의 문장을 index.js의 React.render 내부에 추가하면 아래의 사진처럼 결과가 나올 것이다. JSX는 주로 React의 element를 생성하는데 이는 다음 챕터에서 엘리먼트에 대해 설명할 때 다루도록 하겠다. JSX란? React의 목적 중 하나는 결합성을 줄이고 응집성을 높이는 데에 있다. 이는 좋은 소프트웨어를 만들기 위해 중요한 부분 중 하나다. 소프트웨어 공학 개론..

리액트를 사용해 화면에 'Hello World'를 띄우는 가장 간단한 방법은 ReactDom.render( Hello World document.getElementById('root'); ) 위의 코드를 입력하는 것이다. 나는 create-react-app으로 리액트를 환경을 구성했기 때문에 /src/index.js 파일에서 ReactDom.render 부분을 위와 같이 수정했다. 수정 후 리액트 페이지를 들어가면 다음과 같이 나를 반겨주는 메시지를 볼 수 있다.

내가 사용하고 있는 CentOS7에 리액트를 설치해 기본 화면을 띄워보려고 한다. Step 1. 필수 패키지 설치 nodejs 설치 $ sudo yum install nodejs 위와 같이 명령어를 입력하면 nodejs를 설치할 수 있다. 설치가 완료되고 node --version과 npm --version을 통해 nodejs와 npm의 버전을 확인할 수 있다. yarn 설치 $ sudo npm install -g yarn yarn은 npm을 사용해 설치할 수 있다. 정상적으로 설치가 끝나고 yarn --version을 입력하면 위처럼 버전을 볼 수 있다. create-react-app 설치 $ sudo npm install -g create-react-app create-react-app 또한 npm을..