React

useEffect 로 마운트/언마운트/업데이트 시 작업 처리

용어 정리 - 마운트: 처음 화면에 나타날 떄 - 언마운트: 화면에서 사라질 때 - deps: 의존하는 값. dependence. useEffect useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect 는 컴포넌트가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있다. *즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열(deps)이 들어간다. useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { ..

배열 항목 관리

배열에 항목 추가하기 (Create) 배열에 변화를 줄 때에는 객체와 마찬가지로 불변성을 지켜야 한다. 따라서 push, splice, sort 등의 함수는 사용하면 안된다. 사용해야 한다면 기존의 배열을 한 번 복사하고 나서 사용해야 한다. 불변성을 지키면서 배열에 새 항목을 추가하는 방법 spread 연산자 사용 ([...복사할배열이름, 배열이름]) setUsers([...users, user]) 기존의 배열을 수정하지 않고 복사해온 뒤, 값을 설정해준다. concat 함수 사용 (배열이름.concat(합치고 싶은 배열)) setUsers(users.concat(user)) 기존의 배열에 변화를 주지 않으면서, 배열을 합칠 때 새로운 배열을 만들어낸다. CreateUser.js import React..

useRef 로 컴포넌트 안의 변수 만들기

useRef 역할 DOM을 선택하는 용도 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리 useRef 로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다. 변수를 사용하여 관리할 수 있는 값 setTimeout, setInterval 을 통해서 만들어진 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 리액트 컴포넌트에서의 상태는, 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회할 수 있다. useRef( ) 를 사용할 때 파라미터를 넣어주면 이 값이 .current 값의 기본값이 된다. 더보기 +원문 댓글 추가 리액트 컴포넌트 setState 를 통해서 값이..

배열 렌더링하기

참고 import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( ); } export default UserList; 이러한 배열을 컴포넌트로 렌더링 하고자 할 때, 배열이 고정적이..

useRef 로 특정 DOM 선택하기

useRef Javascript 에서 특정 DOM을 선택하는 방법: DOM Selector 함수 - getElementById, querySelector 리액트에서 특정 DOM 을 선택하는 방법: ref 함수형 컴포넌트에서 ref 를 사용할 때에는 useRef 라는 Hook 함수를 사용한다. 더보기 리액트에서 DOM을 직접 선택해야 하는 경우 특정 엘리먼트의 크기를 가져와야 하는 경우 스크롤바 위치를 가져오거나 설정해야 하는 경우 포커스를 설정해줘야 하는 경우 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리 D3, chart.js 같은 그래프 관련 라이브러리 위와 같은 외부 라이브러리를 사용해야 하는 경우 포커스 설정 이전에 만들었던 InputSample.js 에서는 초기화 ..

input 상태 관리하기

input 상태 관리하기 input 에 onChange 를 사용하면 이벤트에 등록되는 함수에서는 이벤트 객체 e 를 파라미터로 받아올 수 있다. e.target 은 이벤트가 발생한 DOM인 input DOM 을 가리킨다. e.target.value 를 조회하면 현재 input 에 입력한 value 값을 알 수 있다. 변경되는 값은 useState 로 관리한다. input의 상태를 관리할 때는 input 태그의 value 값도 설정해주어야 상태가 바뀌었을 때 input 내용도 업데이트 된다. function InputSample() { const [text, setText] = useState(''); // input 관리할 상태 생성 (기본값 공백으로 설정) const onChange = (e) => {..

useState 로 컴포넌트에서 바뀌는 값 관리하기

리액트 16.8 이전 버전은 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 리액트의 Hooks 중 하나인 useState 함수는 상태(state: 동적인 값)를 관리한다. 이벤트 설정 리액트에서 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 작성한다. 이 때 함수는 함수 실행 형태로 작성 시 렌더링 되는 시점에 함수가 호출되기 때문에 함수형태로 작성해야 한다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease..

조건부 렌더링

조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는것을 의미한다. JSX 에서 null, false, undefined 를 렌더링 하게 된다면 아무것도 나타나지 않게 된다. 삼항 연산자: 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용 && 연산자: 특정 조건이 true 이면 보여주고 그렇지 않다면 숨겨주는 단순 처리의 경우 조건부를 이용하여 Hello 컴포넌트에서 isSpecial 이 true 이냐 false 이냐에 따라 컴포넌트의 좌측에 * 표시 해보자. isSpecial 값이 true 라면 * 를, 그렇지 않다면 null 을 보여주도록 한다. App.js import React from 'react'; import Hello from './Hello'; import Wrapper f..

props

props 사용법 props 는 properties 의 줄임말이다. 우리가 어떠한 값을 컴포넌트에게 전달해주어야 할 때 props 를 사용한다. 예를 들어 App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name 이라는 값을 전달해주고 싶다고 가정하자. 컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회할 수 있다. 받는 쪽은 props 라는 예약어를 통해서 받는다. props 는 객체 형태로 전달되며 만약 name 값을 조회하고 싶다면 props.name 으로 조회하면 된다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js..

JSX

JSX는 리액트에서 생김새를 정의할 때 사용하는 문법이다. HTML같이 생겼지만 실제로는 Javascript 이다. return 안녕하세요; 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel 이 JSX 를 Javascript 로 변환 Babel 이란? 자바스크립트의 문법을 확장해주는 도구이다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써 구형 브라우저 같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 한다. JSX 기본 규칙 JSX 가 Javascript 로 변환이 되려면 지켜야하는 규칙 태그는 꼭 닫혀야 한다. 두 개 이상의 태그가 존재한다면 꼭 하나의 태그로 감싸져야 한다. JSX 내부에 Javascr..

리액트 컴포넌트

리액트 컴포넌트 리액트 컴포넌트를 만들 땐 import 를 통하여 리액트를 불러와줘야 한다. import React from 'react'; 리액트 컴포넌트는 함수, 클래스 형태로 작성할 수 있다. 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX 라고 부른다. 코드의 최하단에는 컴포넌트를 내보내주는 코드를 작성해준다. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용할 수 있다. 컴포넌트는 일종의 UI 조각으로 쉽게 재사용할 수도 있다. export default Hello; Hello.js import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; App.js Hello.js 컴포넌트를 다른 ..

React 작업환경 준비

설치 Node.js : Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져 있다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치한다. Yarn : Yarn 은 조금 개선된 버전의 npm 이라고 생각하면 된다. npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전관리를 하게 될 때 사용한다. Yarn 을 사용하는 이유는 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함이다. 코드 에디터 : 주로 VS Code 를 사용한다. 이 외에도 Atom, WebwStorm, Sublime 이 있다. Git bash : 윈도우의 경우 Git for win..