'📃 Front-End' 카테고리의 글 목록 (9 Page)

React에서 API 호출

2022.10.24

https://jsonplaceholder.typicode.com/ 을 사용 무료로 API 서비스를 제공해서 Test 를 할 수 있습니다 사용자가 어떤 API 로 자원을 가져다 쓸 수 있는지 목록 여기서는 /comments 사용 API 를 호출하려면 해당 API의 주소를 알아야 하는데 위의 리소스를 클릭하고 들어간 URL 입니다. ( https://jsonplaceholder.typicode.com/comments ) ✔ App.js 호출하는 시점 : App.js 컴포넌트가 Mount 하면 호출 function App() { const getData = async () => { const res = await fetch( 'https://jsonplaceholder.typicode.com/comments..

📃 Front-End/React.js

useEffect

2022.10.24

함수형 컴포넌트에서 useEffect 를 이용해서 Lifecycle 를 관리 할 수 있습니다. ✔ 사용법 import React, { useEffect } from "react"; useEffect 를 사용 합니다. 2개의 파라미터를 전달하게 되는데 1. callback 함수, 2. 의존성 배열 을 전달 합니다. 의존성 배열을 뎁스라고 부르기도 합니다. 의존성 배열에 들어있는 값 중 하나라도 변화하면, 첫 번째 파라미터인 콜백 함수가 다시 수행 예시 ✔ Lifecycle.js import React, { useEffect, useState } from 'react'; const Lifecycle = () => { const [count, setCount] = useState(0); const [text,..

📃 Front-End/React.js

React Lifecycle

2022.10.24

React 의 생명주기 Lifecycle ❓ 생애주기 ( Lifecycle ) 일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정 출처 : 국민 안정처 소프트웨어 개발에서도 Lifecycle 이라는 단어가 많이 사용 되는데 프로그램이 실행되고, 종료되는 과정을 나타내기 위해서 사용 합니다. ✔ React 컴포넌트의 Lifecycle 탄생 : 컴포넌트가 화면에 나타나는 것 ( React 에서 Mount 라고 지칭 ) 변화 : state 가 바뀌거나, 업데이트(리렌더) 되거나 이런 변화들 ( Update ) 죽음 : 컴포넌트가 화면에서 사라지게 되는 것 입니다. ( React 에서 UnMount 라고 지칭 ) 즉, React 에서 제작하고 사용하는 컴포넌트들의 탄생 부터 시작해..

📃 Front-End/React.js

리스트 데이터 수정하기

2022.10.24

✔ DiaryItem.js 생성되는 리스트의 아이템에 버튼을 추가 const DiaryItem = ({ onRemove, author, content, create_date, emotion, id }) => { const handleRemove = () => { if (window.confirm(`${id}번째 일기를 삭제 하겠습니까?`)) { onRemove(id); } }; return ( 작성자 : {author} | 감정점수 : {emotion} {new Date(create_date).toLocaleString()} {content} 삭제하기 수정하기 ); }; export default DiaryItem; 전반적인 가독성을 고려해 기존 onRemove 함수를 return 위에 따로 정의 하였습..

📃 Front-End/React.js

리스트 데이터 삭제하기

2022.10.24

추가 할 때와 비슷하게 상위의 data 를 바꿔야 합니다. 삭제를 하면 삭제를 한 배열로 data 의 state 를 업데이트 해야 합니다. 순서 ✔ 생성되는 리스트의 아이템에 버튼을 추가 ( DiaryItem.js ) const DiaryItem = ({ author, content, create_date, emotion, id }) => { return ( 작성자 : {author} | 감정점수 : {emotion} {new Date(create_date).toLocaleString()} {content} { console.log(id); }} > 삭제하기 ); }; export default DiaryItem; onClick() 이벤트 까지 만들어줍니다. 현재 위의 버튼을 클릭하면 가장 최신 아이템의..

📃 Front-End/React.js

리스트 데이터 추가하기

2022.10.24

React 는 단방향으로만 데이터가 흐릅니다. 또한 같은 레벨에 있는 컴포넌트 는 서로 데이터를 교환 할 수 없습니다. 이런 경우 공통 부모요소로 끌어올려서 해결을 할 수 있습니다. ✔ 구조 같은 레벨이라 함은 DiaryEditor 와 DiaryList 입니다. 공통 부모인 App 컴포넌트가 데이터를 배열 형식의 state 로 받습니다. data state 의 값을 DiaryList 에게 전달하면서 리스트를 렌더링 하게 하고 data state 를 변화 시킬 수 있는 상태변화 함수인 setData 를 DiaryEditor 에게 props 으로 전달하면 됩니다. ✔ 시뮬레이션 data state 는 배열이고 [itme1] 하나의 아이템을 가지고 있는 상태 입니다. data 를 props 로 내려받은 Dia..

📃 Front-End/React.js

React - 리스트 렌더링 ( 조회 )

2022.10.23

배열을 사용하여 리스트 렌더링을 할 수 있습니다. React 에서 배열은 게시글, 리스트, 피드 등을 표시 하는 경우 자주 사용 됩니다. 순서 ✔ App.js 에서 빈 객체를 만들어 줍니다. const dummyList 부분 props 을 사용해서 해당 컴포넌트에 데이터를 전달 합니다. { console.log(diaryList); return ( 일기 리스트 {diaryList.length}개의 일기가 있습니다. {diaryList.map((it) => ( // key prop 을 만들라고 에러가 뜨는 경우 (해결) 작성자 : {it.author} 일기 : {it.content} 감정 : {it.emotion} 작성 시간(ms) : {it.create_date} ))} ); }; export defau..

📃 Front-End/React.js

useRef

2022.10.23

useRef ❓ DOM 요소를 접근 할 수 있는 기능 DOM ? HTML과 JavaScript를 이어주는 공간으로, 작성한 HTML을 JavaScript가 이해할 수 있도록 Object로 변환하는 것 출처 : https://www.howdy-mj.me/dom/what-is-dom/ 저장공간 (변수관리) 로 사용 할 수 있습니다. 1. DOM 요소에 접근 바닐라 자바스크립트의 document.querySelector() 와 비슷 합니다. 예시는, 로그인 화면이 나왔을 때 id를 넣는 input을 굳이 클릭하지 않아도 자동으로 포커스가 되어 있게 할 수 있고, 엘리먼트의 크기나 색상을 변경할 때 사용이 가능 합니다. 2. 저장 공간 저장공간이라 하면 많이 사용하는 state를 사용 합니다. 하지만 React..

티스토리툴바