본문 바로가기

React

 (17)
리액트초기설정 리액트를 접근할 때 처음에 cd 파일경로파일을 써주고 yarn state로 시작해준다
props를 이해 못 했다 # 리액트 기초 너무 어렵다 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render( , document.getElementById("root") ); 리액트돔.랜더( 앱을 랜더로 그려준다, 어디에? )도큐먼트.겟엘리먼트바이아디(루트)에다가 디브는 원래 아무것도 없는데 클래스 네임으로 속성을 정해줘서 = 앱이라는 값을 받는다 속성이름 = 속성값 function App() { const value = 28; return ( ); } 펀션 앱은 함수 콘스트 벨류는 지역 변수 리턴해서 리턴 내부에서 내가 그려줄 내용을 쓴다 리턴 안에서 JSX문법을 쓴다 서브에 내려준 age속성이름에 ..
useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 이번에는 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때)특정 작업을 처리하는 방법에 대해서 알아보겠습니다. 마운트 / 언마운트 우선, 마운트/언마운트를 관리해보겠습니다. UserList.js import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} ..
배열에 항목 수정하기 이번에는, 배열 항목을 수정하는 방법을 알아보겠습니다. User 컴포넌트에 계정명을 클릭했을 때, 색상이 초록색으로 바뀌고 다시 누르면 검정색으로 바뀌도록 구현을 해봅시다. 우선 App 컴포넌트의 users 배열 안의 객체 안에 active라는 속성을 추가해주세요. App.js import React, { useRef, useState } from "react"; import UserList from "./UserList"; import CreateUser from "./CreateUser"; function App() { const [inputs, setInputs] = useState({ username: "", email: "" }); const { username, email } = inputs;..
배열에 항목 제거하기 이번에는 배열에 항목을 제거 할 때에는 어떻게 해야 하는지 알아보겠습니다. 우선, UserList에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링 해주겠습니다. UserList.js import React from 'react'; function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map(user => ( ))} ); } export default UserList; User 컴포넌트의 삭제 버튼이 클릭 될 때는 user.id값을 앞으로 props로 받아 올 onR..
배열에 항목 추가하기 이번에는 배열에 새로운 항목을 추가하는 방법을 알아보겠습니다. 우선, input 두개와 button 하나로 이루어진 CreateUser.js라는 컴포넌트를 src 디렉터리에 만들어봅시다. CreateUser.js import React from 'react'; function CreateUser({username, email, onChange, onCreate}) { return ( 등록 ); } export default CreateUser; 이번 컴포넌트에서는 상태관리 CreateUser 에서 하지 않고 부모 컴포넌트인 App에서 하게 하고, input의 값 및 이벤트로 등록할 함수들을 poros로 넘겨받아서 사용해주겠습니다. 이 컴포너트를 App에서 UserList 위에 렌더링 해보세요. impor..
useRef로 useRef로 컴포넌트 안의 변수 만들기 컴포넌트에서 특정 DOM을 선택해야 할 때, ref를 사용해야 한다고 배웠습니다. 그리고, 함수형 컴포넌트에서 이를 설정 할 때 useRef를 사용하여 설정한다고 배웠었습니다. useRef Hook은 DOM을 선택하는 용도 외에도, 다른 용도가 한가지 더 있는데요. 바로 컴포넌트 안에서 조회 및 수정 할 수 잇는 변수를 관리하는 것 입니다. useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRe로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다. 이 변수를 사용하여 다음과 같은 값을 관리 할 수 있습니다. setTimeout,..
배열 렌더링하기 이번에는 리액트에서 배열을 렌더링하는 방법을 알아보겠습니다. 이런 배열이 있다고 가정해봅시다. 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' } ]; 만약에 이 내용을 컴포넌트로 렌더링한다면 어떻게 해야 할까요? 일단, 가장 기본적인 방법으론 비효율적이지만, 그냥 그대로 코드를 작성하는 것 입니다. src 디렉터리에 UserList.js 컴포넌트를 다음과 같이 만들어보세요. UserList.js impor..

티스토리툴바