이번에 해볼 것은 input요소에서 사용자가 입력한/선택한 값을 제어해볼 건데요! let으로 선언한 변수는 JS내에서 변경은 가능하지만, 값이 변경되었다고 다시 렌더링 하지 않습니다. useState로 선언한 state를 setState함수를 통해 값을 변경하면 다시 렌더링하여 반영된 값을 화면에 출력해줍니다. useState()의 인수로 state의 초기값을 주며, 배열로 state와 setState함수를 받습니다. 1-1) text상태 관리하기 (input이 1개일 경우) import React, { useState } from "react"; const App = () => { const [text, setText] = useState(""); const onChange = (e) => { setT..
MyButton을 만들어 재활용하기 오늘은 MyButton을 만들어 재활용해볼 건데요 ! components>MyButton.js입니다. 1째 줄; 버튼을 만들기 위해 필요한 버튼에 들어갈 텍스트, 유형, 클릭하면 발생할 함수를 props로 받았습니다. 2째 줄 ; type가 positive, negative 모두 아니라면 default로 설정하도록 하였습니다. 5,6째 줄 ; props로 받은 type을 변경한 btnType을 이용하여 class명을 지정하고 onClick함수를 속성으로 설정하였습니다. 7째 줄 ; props로 받은 text를 button 안에 출력되도록 하였습니다. const MyButton = ({ text, type, onClick }) => { const btnType = ["p..
라우팅이란? 라우팅이란, 우리가 네트워크에서 특정 경로로 데이터를 보낼 때 사용되는 과정을 말합니다. 라우팅은 어떤 네트워크 안에서 데이터를 최적의 경로를 선택하는 과정을 말합니다. 여기서 최적의 경로는 최단거리가 될 수도 있고, 가장 빠른 시간에 전달하는 것으로 계산될 수 도 있습니다. 라우팅 순서 1. 브라우저에서 최초에 '/'경로로 요청을 하면, 2. React Web App을 내려줌 3. 내려받은 React App에서 '/'경로에 맞는 컴포넌트 보여줌 4. React App에서 다른 페이지로 이동하는 동작을 수행하면, 5. 새로운 경로에 맞는 컴포넌트를 보여줌 React Router 1. 설치 $ npm i react-router-dom index.js import * as React from "..
Hook Hooks는 2019년 6월, 16.8버전에서 정식 출시된 기능으로, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 해준 기능입니다. 즉, class에서만 사용할 수 있던 state, effect, ref기능들을 function에서도 useState, useEffet, useRef 등을 통해 사용할 수 있게 해주는 것입니다. Class형이 아닌, Function형을 사용하게 된 계기는, Class형 컴포넌트의 길어지는 코드 길이 문제 때문입니다. 이 때문에 발생하는 중복 코드, 가독성 문제 등등을 해결하기 위해 등장한 것입니다. Memo Hook JS는 componet의 요소에 변화가 생기면 매번 mount됩니다. 매번 많은 데이터를 구하면 ..
이번에는 데이터를 추가해보겠습니다! App>DiaryList>DiaryItem 부모>자식>손자에게 onDelete함수를 전달하겠습니다. 우선, App에서 DiaryList로 onDelete함수를 props로 전달,전달해주겠습니다. const App = () => { return ( ); } DiaryList입니다. onDelete를 props로 전달받아, DiaryItem에게 props로 전달하였습니다. const DiaryList = ({ diaryList, onDelete }) => { return( {diaryList.map((it)=>( ))} ) }; DiaryItem입니다. onDelete함수를 props로 전달받아 button의 onClick 이벤트함수로 bind해주었습니다. if(windo..
React의 Component는 단방향 구조임 App > DiaryEditor App > DiaryList 구조인데, DiaryEditor -> DiaryList 로 데이터를 넘겨주고 싶다면, 1. App의 state로 data와 setData를 만든다 -> onCreate함수에 setData를 넣음 2. DiaryEditor에게 props로 onCreate를 넘겨준다. -> DiaryEditor가 onCreate를 통해 data를 추가한다 첫번째로, App의 state로 data와 setData를 만들어보겠습니다. 1. const [data,setData]=useState([ ]) ; state변수 data와 data를 변경할 함수 setData, data의 초기값 useState([ ])로 설정해줍니..
오늘 배워 볼 것은 React에서 List를 Rendering하는 것입니다 ! 오늘 만들 구조는 1. App.js에서 DairyList Component에 props로 dummyList를 넘겨줍니다. 2. dummyList를 props로 전달 받은 DairyList에서 DairyItem Component에 props로 넘겨받은 props를 그대로 넘겨줍니다. 3. dummyList를 props로 전달받은 DairyItem에서 리스트를 활용해 화면에 출력합니다. 1. App Component 1. 리스트를 props로 넘겨 줄 때, 이런 식으로 변수를 넘겨주듯이 넘겨줍니다. 이 prop는 변경할 수 없습니다. import "./App.scss"; import DairyList from "./DairyLis..
이번에 사용할 것은 useRef인데요! 지난번에 만들던 프로젝트를 연결해서 만들어보겠습니다. import {useRef} from "react" react로부터 useRef를 import해옵니다. import { useRef } from "react"; 1. DiaryEditor Component안에 const authorInput=useRef, const contentInput=useRef로 useRef객체를 만들어줍니다. 2. state.author.length { const authorInput = useRef(); // DOM요소에 접근할 수 있는 Reference const contentInput = useRef(); }); const handleSubmit = () => { if (state...
