분류 전체보기
-
[React] useCallback Hooks 알아보기Front-end/React 2020. 11. 29. 23:54
useCallback 이전에 만들었던 함수를 재사용 할 때 사용합니다. useMemo와 비슷하지만 함수를 위한 Hook입니다. useCallback 선언하기 import React, { useCallback } from "react"; useCallback 사용하기 useCallback(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다.44444444 const onChange = useCallback( (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); }, [inputs] ); 위 코드는 inputs를 감지하여 변화가 일어..
-
[React] useMemo Hooks 알아보기Front-end/React 2020. 11. 29. 23:51
useMemo 이전에 연산된 값을 재사용 할 때, 주로 성능을 최적화 할 때 사용합니다. useMemo 선언하기 import React, { useMemo } from "react"; useMemo 사용하기 useMemo(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. useEffect와 구성이 똑같습니다. 만약에 유저가 활성화 상태인 경우만 찾는다고 가정하겠습니다. function countActiveUsers(users) { console.log("활성 사용자 수 세는 중....."); return users.filter((user) => user.active).length; } const count = countAc..
-
[React] useRef Hooks 알아보기Front-end/React 2020. 11. 29. 23:48
useRef 특정 DOM을 가져올 수 있도록 해주며, 렌더링과 관계 없는 변수를 선언할 때 사용합니다. 이번 파트는 useState에서 활용한 예제를 그대로 사용합니다. useRef 선언하기 import React, { useState, useRef } from "react"; import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: "", nickname: "", }); const nameInput = useRef(); const { name, nickname } = inputs; const onChange = (e) => { const { name..
-
[React] Map 알아보기Front-end/React 2020. 11. 29. 23:35
map 배열을 렌더링 할 때 편리하게 렌더링 하도록 도와줍니다. map 사용하기 배열.map() 으로 선언합니다. import React from "react"; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: "junjang1", email: "junjang.see1@gmail.com", }, { id: 2, username: "junjang2", email: "junjang.see2@gmail.com", }, { id: 3, username: "junjang3", email: "junjang.see3@gmail.com", ..
-
[React] Props 알아보기Front-end/React 2020. 11. 29. 23:32
props properties의 줄임말이며 컴포넌트를 사용할 때 특정 값을 전달해주고 싶을 때 사용하는 것입니다. props 전달하기 import React from "react"; import Hello from "./Hello"; function App() { return ; } export default App; Hello JSX에 name="react" 라는 값을 보냅니다. props 받아내기 import React from "react"; function Hello(props) { console.log(props); // {name: "react"} console.log(props.name); // react return 안녕하세요; } export default Hello; 받아온 props는..
-
[React] JSX 알아보기Front-end/React 2020. 11. 29. 23:29
JSX JSX는 리액트에서 생김새를 정의할 때 사용하는 문법입니다. HTML 같이 생겼지만 실제로는 자바스크립트입니다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 자바스크립트로 변환을 해줍니다. 하지만 모든 경우에서 이렇게 변환시켜주지 않고 규칙을 따라야 합니다. 이에 대해 알아보겠습니다. 꼭 태그를 닫아야한다. import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 쌍으로 필요한 div 태그를 예로 들면 닫힌 태그(/)가 없을 경우 에러를 발생시킵니다. self closing을 해야한다. import React from "react";..
-
[React] 컴포넌트 알아보기Front-end/React 2020. 11. 29. 23:25
컴포넌트 컴포넌트는 독립적으로 사용가능한 모듈인데요 컴포넌트 하나를 구현하여 어디서든 독립적으로 사용할 수 있게 할 수 있어야합니다. 컴포넌트를 만들 땐 몇가지 필수적으로 넣어주어야 하는 것이 있습니다. 리액트 사용하기 import React from "react"; react를 가져와서 사용하겠다는 것을 의미합니다. 클래스 컴포넌트 import React, { Component } from "react"; class Hello extends Component { render() { return ( 안녕하세요 ); } } Component를 가져와서 상속받아 사용해야합니다. 최근에는 Hooks + 함수형 컴포넌트로 인해 많이 사용되고 있는 패턴은 아닙니다. 함수 컴포넌트 import React from ..
-
[JS] 펼침 연산자 사용하기Front-end/Javascript 2020. 11. 29. 22:43
펼침 연산자 ES6이후 사용되다가 ES8에 정식적으로 포함된 기능입니다. ...을 통해 객체를 복사할 수 있습니다. 기존 객체에 추가 const book = { title: '코딩의 기술', author: 'Joe Morgan', }; const update = { ...book, year: 2019 }; // {title: "코딩의 기술", author: "Joe Morgan", year: 2019} 기존 객체를 갱신 const book = { title: '코딩의 기술', author: 'Joe Morgan', }; const update = { ...book, title: '자바스크립트 코딩의 기술' }; // {title: "자바스크립트 코딩의 기술", author: "Joe Morgan"} 객체..