Front-end/React (34) 썸네일형 리스트형 React - controlled-input import React, { useState } from 'react'; const ControlledInputs = () => { const [firstName, setFirstName] = useState(''); const [email, setEmail] = useState(''); const [people, setPeople] = useState([]); const handleSubmit = (e) => { e.preventDefault(); if (firstName && email) { const person = { id: new Date().getTime().toString(), firstName, email }; console.log(person); setPeople((people) => {.. React - removeEventListener useEffect(() => { window.addEventListener('resize', checkSize); return () => { window.removeEventListener('resize', checkSize) }; }) addEventListener만 사용하면 state가 바뀔 때마다 함수가 재생성 된다 이 문제를 막기위해 removeEventListener 사용한다. removeEventListener를 사용하면 더 이상 함수가 재생성 되지 않고 한번만 생성된다. React - useEffect : github user profile 만들기 import React, { useState, useEffect } from 'react'; const url = 'https://api.github.com/users'; const UseEffectFetchData = () => { const [users, setUsers] = useState([]); // url주소 가져오기 const getUsers = async () => { const response = await fetch(url); const users = await response.json(); setUsers(users); }; // [] = 사용하지 않으면 데이터가 무한으로 reload된다. useEffect(() => { getUsers(); }, []); return ( github.. useEffect 란? react의 컴포넌트 내에서 데이터를 가져오거나 구독하고, DOM을 조작하는 작업을 side effects 또는 effects라고 한다. 이는 다른 컴포넌트에 영향을 줄 수 도 있고 렌더링 과정에서는 구현 불가능한 작업이기 때문이다. useEffect는 이러한 side effects를 수행할 수 있도록 해준다. 클래스 컴포넌트의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같이 lifecycle을 다루는 목적으로 제공되지만 이를 하나의 API로 통합하였다는 것이 차이점이다. 클래스형 컴포넌트의 life cycle react의 원래 lifecycle은 위의 그림과 같다. react 컴포넌트 side effect에는 일반적으로 정리가 필요한 것.. React - useState : Ragular Counter 만들기 - useState function를 호출할때는 onClick={ () => setValue} 에로우function을 꼭 사용해야 한다 ( 클릭했을때만 실행되도록 하기 위해서 ) import React, { useState } from 'react'; const UseStateCounter = () => { const [value, setValue] = useState(0); const reset = () => { setValue(0); } return ( ragular counter {value} setValue (value -1)}>decrease reset setValue (value + 1)}>increase ) }; export default UseStateCounter; React - useState 이해하기 React - Fragment란? Fragment Fragment는 React v16에 추가된 기능 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. class Table extends React.Component { render() { return ( ); } } 렌더링 된 Table 컴포넌트가 유효하려면 가 여러 엘리먼트를 반환해야 한다. div 사용 시 class Columns extends React.Component { render() { return ( Hello World ); } } 그런데 위와 같이 가 를 로 감싸서 반환한다면 실제 dom tree는 아래와 같이 구성.. React - Children 사용하기 React에서 Children은 재사용을 위해서 사용된다 function BookList() { return ( Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nulla quasi obcaecati aperiam quidem molestias ipsum nisi, sunt quia porro. ); } 위 코드에서 사이에 children으로 전달할 입력값이 들어간다 const Book = (props) => { return ( {props.title} {props.author} {props.children} ) } 그리고 Book변수에서 {props.children} 으로 호출하여 사용한다. 이전 1 2 3 4 5 다음
