Front-end/React
-
[React] state 알아보기Front-end/React 2020. 11. 30. 00:59
State state는 상태라는 뜻을 가지고 있습니다. 컴포넌트에서 상태는 컴포넌트가 살아있는 동안 변화가 가능한 객체입니다. props와 헷갈릴 수도 있지만 명확히 구분하자면 props는 탑다운 방식으로 내려온 읽기 전용의 데이터의 느낌이라면, state는 컴포넌트가 소유하고 있는 고유의 값이라고 보면 될 것 같습니다. 선언하기 import React from 'react'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { number: 0, }; } render() { return ( { this.setState({ number: this.state.number + 1, }); }}..
-
[React] useReducer Hooks 알아보기Front-end/React 2020. 11. 29. 23:56
useReducer useState처럼 상태를 업데이트할 수 있습니다. 차이점으로는 useState는 다음 상태를 직접 지정하지만, useReducer는 액션이라는 객체를 기반으로 상태를 바꾸어줍니다. useReducer 선언하기 import React, { useReducer } from "react"; const [number, dispatch] = useReducer(reducer, 0); number는 현재 상태값, dispatch는 액션을 발생시키며 reducer에는 함수를, 0에는 초기값을 나타냅니다. useReducer 사용하기 useReducer(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. functio..
-
[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";..