Front-End/React23 [ React ] React 기본 ⑥ React Developer Tools React Developer Tools : 리액트 개발시에 생산성을 늘려주는 편리한 크롬 개발자 확장 도구 npm start로 리액트를 시작한 페이지에 React Developer Tools가 표시가 되면 해당 페이지는 리액트를 개발 중이라고 알려준다. F12를 눌러 개발자 도구를 열어보면 React Developer Tools가 제공하는 Components와 Profiler를 확인할 수 있다. Components : 만들어놓은 컴포넌트를 React Developer Tools가 해석해서 보여주게 된다. → 컴포넌트의 계층 구조, 각각의 컴포넌트가 어떤 데이터와 props, state를 가지고 있는지 쉽게 확인 가능 또한 Highlight 기능을 켜준다면 컴포넌트가 리랜더링 될 때마다 리랜더링 되고 있는.. 2022. 10. 15. [ React ] React 기본 ⑤ React에서 API 호출하기 [ useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 이용하기 ] 자바스크립트 API 호출 내장 함수인 fetch를 사용해서 API를 호출하고, 응답 데이터를 App 컴포넌트가 가지고 있는 일기 데이터인 data state에서 일기 데이터의 초기값을 설정한다. 무료로 API 데이터를 제공해서 테스트를 할 수 있게 도와주는 JSONPlaceholder 서버스를 사용한다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JS.. 2022. 10. 14. [ React ] React 기본 ④ React Lifecycle 제어하기 생명주기( lifecycle ) : 프로그램이 실행되고 종료될 때 까지의 과정 리액트의 컴포넌트도 Lifecycle을 갖는다. 1. 탄생 → 화면에 나타나는 것 : 컴포넌트 mount ex) 초기화 작업 2. 변화 → 업데이트( 리렌더 ) : update * 컴포넌트가 변화하는 순간 ex) 예외 처리 작업 3. 죽음 → 화면에서 사라짐 : 컴포넌트 unmount ex) 메모리 정리 작업 컴포넌트의 lifecycle을 제어한다는 것은 컴포넌트가 탄생 → 변화 → 죽음 과정동안 각각 필요한 작업을 수행시켜주면 된다는 의미이다. 리액트는 기본적으로 lifecycle마다 실행할 수 있는 메소드를 가지고 있다. 1. componentDidMount : 컴포넌트가 mount 되는 순간에 어떠한 기능을 수행할 수 있.. 2022. 10. 13. [ React ] React 기본 ③ React에서 배열 사용하기 - 4. 리스트 데이터 수정하기 1. 배열을 이용한 React의 List에 아이템을 동적으로 수정해보기 ① 수정하기 버튼을 위한 State 추가하기 const [isEdit, setIsEdit] = useState(false); isEdit의 기본값은 false이다. isEdit의 역할은 true와 false 값을 갖게 되어 수정 중인지 수정 중이 아닌지에 대해 boolean형으로 체크를 한다. true라면 수정 중이기 때문에 코드를 작성하면 되고, false라면 버튼만 랜더하면 된다. ② isEdit이 가지고 있던 값을 반전시키는 toggleEdit 함수 추가하기 const toggleIsEdit = () => setIsEdit(!isEdit); toggleEdit 함수는 호출이 되는 순간 원래 isEdit이 가지고 있던 값을 반전시.. 2022. 10. 1. [ React ] React 기본 ③ React에서 배열 사용하기 - 3. 리스트 데이터 삭제하기 1. 리스트에 존재하는 데이터를 삭제하는 버튼을 각각의 아이템에 생성하기 리스트에 존재하는 데이터를 삭제해주기 위해서는 App 컴포넌트가 가지고 있는 일기 data state를 변경해줘야 한다. 각 아이템의 삭제하기 버튼을 누른다면 그 아이템이 사라진 배열로 업데이트를 시켜줘야한다. App 컴포넌트안에 삭제하기 버튼을 눌렀을 때 발생하는 이벤트인 onDelete 함수를 생성한다. onDelete 함수는 App 컴포넌트에서 직접 함수를 호출하는 것이 아니기 때문에 매개변수로 id를 전달받아 전달받은 id를 가진 아이템을 삭제하도록 한다. 우선 onDelete 함수를 DiaryList에 props로 내려준다. DiaryList에서는 부모로부터 전달받은 함수를 다시 DiaryItem에 또 내려준다. 즉 두 차.. 2022. 10. 1. [ React ] React 기본 ③ React에서 배열 사용하기 - 2. 리스트 데이터 추가하기 1. 배열을 이용한 React의 List에 아이템을 동적으로 추가해보기 리액트에서는 같은 레벨간의 데이터를 주고 받는 일이 불가능하다. → React는 단방향으로만 데이터가 흐른다. ( 단방향 데이터 흐름 ) 작성한 컴포넌트를 같은 레벨의 컴포넌트에 추가를 해주기 위해서는 리액트의 상태인 state를 컴포넌트의 공통 부모 요소인 컴포넌트로 끌어올려서 해결할 수 있다. 부모 요소인 이 일기 데이터를 배열 형식의 state를 가지고 있고 데이터 state의 값을 에 전달을 하면서 리스트를 랜더링하게 하고 데이터 state를 변화시킬 수 있는 상태 변화 함수인 setData를 에게 prop으로 전달해준다면 된다. data state가 하나의 요소를 가지고 있는 배열일 경우, data를 prop으로 전달받은 컴.. 2022. 9. 29. [ React ] React 기본 ③ React에서 배열 사용하기 - 1. 리스트 랜더링 ( 조회 ) 배열을 이용하여 React에서 LIST를 랜더링 해보고 개별적인 컴포넌트로 만들어보기 1. 저장하기 버튼을 누르면 리스트 밑에 추가를 하기 위한 임시 배열을 생성하고 DiraryList 컴포넌트에 props로 데이터를 전달해서 그 데이터를 리스트로 랜더링 해보기 new Date()를 통해 생성된 Date 객체를 배열에 담는 경우 객체 안에 있는 프로퍼티를 문자열화 하게 되면 사용하기 불편할 수 도 있다. 그래서 Date 객체에 getTime() 메소드를 사용해서 밀리세컨즈로 변환해 사용해준다. getTime()이라는 Date 객체의 메소드는 number를 반환하는 함수이다. 시간을 받아 밀리세컨즈로 반환한다. App.js import './App.css'; import DiaryEditor from '... 2022. 9. 28. [ React ] React 기본 ② React에서 DOM 조작하기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus 하기 1. 버튼을 클릭했을 때 발생하는 이벤트 핸들러 함수에 각 state에 대한 조건문을 사용해서 길이에 제한을 두면 된다. DairyEditor.js const handleSubmit = () => { if(state.author.length < 1){ alert("작성자를 최소 1글자 이상 입력해주세요"); return ; } if(state.content.length < 1){ alert("본문 내용을 최소 1글자 이상 입력해주세요"); return ; } alert("저장 성공"); } alert를 갑자기 띄어버리는 것은 좋지 않다. → alert 대신 input 태그와 textarea에 focus를 주.. 2022. 9. 28. [ React ] React 기본 ① 사용자 입력 처리하기 [ React에서 사용자 입력 처리하기 ] 1. 컴포넌트가 input에 작성된 값을 직접 다룰 수 있도록 만들어야된다. → useState 사용 input에 들어가는 값이 실시간으로 바뀔 때 마다 상태 변화 함수를 이용해서 state에 입력 값을 저장해주면 된다. → state에 input 태그의 value 속성을 이용해서 전달해주면 된다. DiaryEditor.js import {useState} from "react"; const DiaryEditor = () => { const [ author, setAuthor ] = useState(""); // input에 들어갈 내용을 관리할 author 라는 state와 // 그 state의 상태변화를 주도하는 함수인 setAuthor를 만들어준다. ret.. 2022. 9. 19. 이전 1 2 3 다음
