ROMISTELLA ROMISTELLA

import { useRef, useState } from "react";const DiaryItem = ({onEdit,onRemove,author,content,created_date,emotion,id,}) => {const [isEdit, setIsEdit] = useState(false);const toggleIsEdit = () => setIsEdit(!isEdit);const [localContent, setLocalContent] = useState(content);const localContentInput = useRef();const handleRemove = () => {if (window.confirm(`${id}번째 일기를 정말 삭제하겠습니까?`)) {onRemove(id);}};..

import { useRef, useState } from "react";import "./App.css";const DiaryEditor = ({ onCreate }) => { const authorInput = useRef(); const contentInput = useRef(); //MutableRefObject는 htmldom요소에 접근 const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { console.log(e.target.name); console.log(e.target.value); setState({ ...state, [e.target.na..

label은 input옆에 써주는 글씨       const [minutes, setMinutes] = React.useState("");      리액트에서 가져온 스테이트 사용하고 거기서 데이터를 얻고, 업데이트도 진행하고 있다.       [minutes, setMinutes] 1번은 value 2번은 value를 수정하고 컴포넌트 새로고침할때 쓰는 함수        input의 value로 넣어주는것  input의 value는 state의 value와 값이 같아진다.       input에 변화가 생기면 onChange 함수가 실행         target이란 방금 바뀐 input을 말한다.       event.target.value          state의 결과는 array 이다     ..

state: //1. const food =["tomato", "potato"] //2. const [myFavFood, mySecondFavFood]=food //1,2은 같다  modifier 함수는 그 값으로 업데이트하고 리렌더링을 일으킨다 const [counter, modifier] = React.useState(0); React.useState 함수는 counter같은 데이터를 숫자형 데이터로 건네주고modifier - 데이터 값을 바꿀 함수 modifier를 이용해서 데이터가 바꼈을때 데이터값이 바뀌고컴포넌트도 동시에 리렌더링이 된다. 업데이트가 되는것! modifier -> set으로 써준다  counter라는 데이터를 받아서 return에 counter를 넣어준다 return에 있는  c..

react-dom은 React element를 html에 두는 역할/ render는 "사용자에게 보여주는것!"/ReactDOM.render(span); ReactDOM에 span을 어디에 둘 것인지 알려줘야한다 span의property는 id가 될 수 도 className가 될 수도 있다이벤트를 줄때  바닐라 js에서는 click이지만 리액트js에서는 on을 붙여줘야한다 onMouseEnter :  를 onMouseEnter = 으로 태그를 열고 닫고 그 사이에 내용을 담고 props는 태그 안에 담아주고 바벨은 코드를 변환시켜주는 아이jsx로 적은 코드를 브라우저가 이해할 수 있는 혀여태로 바꿔줌  (function dd (){}) = (= () =>())이 두개는 같은 것  Container가  Re..

usestate : 리렌더링then (응답이오면!)get(   ) : 조회set(   ) : 변경  defaultprops : 컴포넌트에 props를  지정하지 않았을때 사용값을 설정하고싶다면 defaultprops를 설정props는 부모에서 주어야 컴포넌트에 가져올 수 있다state는 컴포넌트 안에서 수정이 가능하다!state를 조회할때 this state로 조회합니다! onkeypress : 사용자가 키보드의 키를 누르고 있을때 특수키 인식 못함onkeyup : 사용자가 키보드의 키를 눌렀다 뗏을때 모든키에 동작 특수키는 동작 Xonkeydown : 사용자가 키보드의 키를 눌렀을때 모든키 동작 특수키는 동작 X

로그인 페이지 구현해보기

학습 과정 분야 코드리뷰란? 개발자들이 서로의 코드를 의도적,체계적으로 검토하는 행위. 다른 사람이 작성한 코드를 검토하면서 궁금한 부분 질문하고, 버그가 있는 부분을 알려주고, 효율성이나 개선 해야할 점을 피드백을 주고 받으면서 코드를 개선하는 과정입니다. 코드 리뷰하는 이유 리뷰어에게 피해주지 않도록 프로의식 발휘하게 됩니다. 양방향 지식 공유로 조직 전체 기술력이 향상하고 다른 사람과의 코드 리뷰를 통해 알지못했던 노하우와 경험을 얻을 수 있습니다. 자신은 몰랐던 오류를 피드백을 받으면서 오류를 사전 발견할 가능성이 높아집니다. 기업별 코드리뷰 방식 구글 100% 코드 리뷰, 모든 코드를 리뷰 모든 코드를 사내 정책에 맞는 규칙에 맞춰 최대한 작게, 자주4시간 이내로 리뷰 (작은 리뷰는 1시간 이내..