React (17) 썸네일형 리스트형 useRef로 특정 DOM 선택하기 JavaScript를 사용 할 때에는, 우리가 특정 DOM을 선택해야 하는 상황에 `getElementById`, `querSelector`같은 DOM Selector 함수를 사용해서 DOM을 선택합니다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스코롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있겠죠. 추가적으로 Video.js, JWPlayer같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 .. 여러개의 input 상태 관리하기 지난 튜토리얼에서 우리는 input 상태를 관리하는 방법에 대하여 알아보았는데요, 이번에는 input이 여러개일때는 어떻게 관리해야 하는지 알아보겠습니다. 우선 지난번에 만든 InputSample에서 새로운 input을 보여주세요. 이번에는 input이 비어져있을 때 인풋에 대한 설명을 보여주는 placeholder값도 설정해보겠습니다. 기존에 만들었던 상태는 지워주시고, onChange와 onReset함수는 비워주세요. InputSample.js import React, { useState } from 'react'; function InputSample() { const onChange = (e) => { }; const onReset = () => { }; return ( 초기화 값: 이름 (닉네임.. input 상태 관리하기 이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보겠습니다. 우선, src e디렉터리에 lnputSample.js라는 파일을 생성하세요. InputSample.js import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; 그 다음에는, 이 컴포넌트를 App에서 렌더링하세요. App.js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; input에 입력하는 값이하단에 나타나게 하고.. useState를 통해 컴포넌트에서 바뀌는 값 관리하기 지금까지 우리가 리액트 컴포넌트를 만들 때는, 동적인 부분이 하나도 없었습니다. 값이 바뀌는 일이 없었죠. 이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 알아보겠습니다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데요, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나입니다. 정말 진부한 예제인, 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 만들어볼게요. src 디렉터리에 Counter.js를 다음과 같이 작성해보세요. Counter.js i.. 조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다. 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, isSpecial이라는 props를 설정해볼게요. App.js import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; 여기서 true는 자바스크립트 값이기 때문에 중괄호로 감싸주었습니다. 그리고, Hello 컴포넌트에서는 isSpecial이 true이냐 False이냐에 따라서 컴포넌트의 좌측에 *표시를 보여줘보겠습니다. 이를 처리하는 가장 기본적인 방법은, 삼항연산.. props를 통해 컴포넌트에게 값 전달하기 이번에는 컴포넌트 props라는 개념에 대해서 알아보겠습니다. props는 properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다. props의 기본 사용법 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name이라는 값을 전달해주고 싶다고 가정해봅시다. 그러면, 이렇게 코드를 작성하면 됩니다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 이제, Hello 컴포넌트에서 name 값을 사용하고 싶을 땐 어떻게 하면 되는지 알아볼까요? Hello.js import React .. JSX의 기본 규칙 알아보기 JSK는 리액트에서 생김새를 정의할 때, 사용하는 문법입니다. 얼핏보면 HTML같이 생겼지만 실제로는 JavaScript입니다. return 안녕하세요; 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 JavaScript로 변환을 해줍니다. 어떻게 변환되는지 한번 예시를 볼까요? https://bit.ly/2wMpkk2 Babel은 자바스크립트의 문법을 확장해주는 도구입니다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 합니다. JSX가 JavaScript로 제대로 변환이 되려면 지켜주어야 하는 몇가지 규칙이 있습니다. 다음 문법들.. 나의 첫 번째 리액트 컴포넌트 첫번째 리액트 컴포넌트를 만들어봅시다. src 디렉터리에 Hello.js라는 파일을 다음과 같이 작성해보세요. Hello.js import React from 'react'; function Hello() { return 안녕하세요 } deport default Hello; 리액트 컴포넌트를 만들때에는 import React from 'react'; 를 통하여 리액트를 불러와주어야 합니다. 리액트 컴포넌트는 함수형태로 작성 할 수도 있고 클래스형태로도 작성 할 수 있습니다. 지금 단계에서는 함수로 작성하는 방법에 대해서만 알아보겠습니다. 리액트 컴포넌트에서는 XML형식의 값을 반환해줄 수 있는데 이를 JSX라고 부릅니다. 이에 대해선 다음번에 알아보도록 하겠습니다. 코드의 최하단에 export defau.. 이전 1 2 3 다음
