react
-
React Array CRUD : 배열 렌더링+추가+제거+수정Study/React 2020. 1. 7. 10:11
React에서 배열을 렌더링 하려면 어떻게 해야할까? 우선 배열 원소를 하나 하나 렌더링해야하기 때문에 재사용되는 코드가 있을 것이다. 따라서 배열 컴포넌트 외에 렌더링에 필요한 컴포넌트를 하나 더 생성한다. 그리고 동적인 데이터 처리를 위해 자바스크립트의 내장함수 map() 을 사용하여 동적인 배열을 렌더링해준다. 마지막으로 배열을 렌더링 할 때는 key라는 props를 설정해야한다. key는 배열의 각 원소들이 가지고 있는 고유값으로 설정해줘야한다. key가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다. React element의 유일성 만약 각 요소에 key를 설정해주지 않으면 아래와 같은 오류 메세지가 뜬다. "Each child in a list should have ..
-
React Hooks : useRef() 함수Study/React 2020. 1. 5. 10:21
자바스크립트에서 특정 DOM 을 선택해야할 때는 DOM Selector를 사용한다. 리액트 프로젝트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야한다거나 특정 DOM을 선택해야할 상황이 있다. 이런 경우, 리액트 함수형 컴포넌트에서는 React Hooks 중 하나인 useRef() 함수를 사용한다. 클래스형 컴포넌트에서는 콜백함수를 사용하거나 React.createRef 함수를 사용한다. useRef() 함수 사용법 초기화 버튼 누르면 input 태그에 focus 잡히는 기능 구현하기 InputTest.js import React, { useState, useRef } from 'react'; function InputTest() { const [text, setText] = useState(..
-
React 조건부 렌더링Study/React 2020. 1. 3. 18:26
조건부 렌더링이란? 조건에 따라 다른 결과물을 렌더링하는 것을 의미한다. 보통 삼항연산자를 사용하여 조건부 렌더링을 진행한다. 특정 조건이 true이면 이것을 렌더링하고, false이면 저것을 렌더링할 수 있다. 만약 props 값 설정을 생략하고 prosp 이름만 적는다면, 디폴트값은 true이다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello({name, color, boolean}) { return ( 안녕하세요 {name} {boolean ? Hello..
-
React props : 컴포넌트에게 값 전달Study/React 2020. 1. 3. 10:51
컴포넌트 props란? properties의 줄임말로서, 컴포넌트의 입력값이다. props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미한다. 그리고 props 는 state와 달리 read-only 라는 것에 주의해야한다. props 사용법 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; App 컴포넌트에서 Hello 컴포넌트를 불러와서 사용할 때, name과 color 값을 전달해주고자 한다. 첫 번째 방법: props 파라미터 활용 Hello.js import React from 'react'; function Hello(props)..
-
React 문법 : JSX (JavaScript XML)Study/React 2020. 1. 2. 10:04
import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; return 뒤에 작성된 부분이 마치 HTML 처럼 생겼지만 이는 JSX 문법이라고 할 수 있다. JSX란? 자바스크립트 문법을 확장하여 UI가 어떻게 보일지 정의하는 문법이다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면, Babel이 JSX 문법을 JavaScript로 변환해준다. 하지만, JSX가 제대로 자바스크립트로 변환이 되려면 지켜야하는 규칙들이 있다. JSX 규칙 1. 태그는 닫혀있어야 한다. import React from 'react'; import Hello from './Hello'; function App() { return ..