본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 10. useRef 로 특정 DOM 선택하기 JavaScript 를 사용 할 때 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 9. 여러개의 input 상태 관리하기 input 이 여러개일때는 어떻게 관리해야 하는지 알아보자. 우선 지난번에 만든 InputSample 에서 새로운 input 을 추가해보자. 이번에는 input 이 비어져있을때 인풋에 대한 설명을 보여주는 pla...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 8. input 상태 관리하기 이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보자. 우선, src 디렉터리에 InputSample 컴포넌트를 생성 후 App 컴포넌트에서 렌더링해보자. InputSamp...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 지금까지는 리액트 컴포넌트를 만들 때 동적인 부분이 하나도 없었다. 즉 값이 바뀌는 일이 없었다. 이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 6. 조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결괌루을 렌더링하는 것을 의미한다. 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, isSpecial 이라는 props 를 설정해보자. import React from...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 5. props를 통해 컴포넌트에게 값 전달하기 이번에는 컴포넌트의 props 라는 개념에 대해서 알아보자. props 는 properties 의 줄임말이다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다. props 의 기...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 4. JSX의 기본 규칙 알아보기 JSX 는 리액트에서 생김새를 정의할 때, 사용하는 문법이다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript 이다. return <div>안녕하세요</div>; 리액트 컴포넌트 파...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 3. 나의 첫번째 리액트 컴포넌트 첫번째 리액트 컴포넌트를 만들어보자. src 디렉터리에 Hello.js 라는 파일을 다음과 같이 작성해보세요. Hello.js import React from 'react'; function Hello() ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 2. 작업환경 준비 앞으로의 튜토리얼을 진행하기 위해 다음 항목들을 설치해주어야 한다. Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있다. 그렇기에 해당 도구들을 사용하기 위해서...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 01. 리액트는 어쩌다 만들어졌을까? 어떤 기술을 새로 익힐때 해당 기술의 본질(해당 기술이 생겨난 배경, 풀어내고자 하는 문제)를 이해하는 것이 가장 중요하다고 생각한다. 리액트는 왜 만들어졌을까? Javascript를 사용하여 HTML 로 구성한 U...