Study/React
-
React Hooks : useEffect() 함수Study/React 2020. 1. 6. 11:57
useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. useEffect() 사용법 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 import React, { useEffect } from 'react'; useEff..
-
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 Hooks : useState() 함수Study/React 2020. 1. 4. 10:25
리액트 컴포넌트에서 동적인 값을 상태(state) 라고 부른다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다. React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다. 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 힘들었다. 하지만 리액트 16.8 버전부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 됐다. Hooks 중에 useState() 함수가 있는데, 이를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있다. useState( ) 함수 사용법 Counter.js import React, { useState } from..
-
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)..