DiaryEditor에 기능추가하기 일기 저장 버튼을 클릭했을 때 값이 없으면 focus하기 handleSubmit 함수에 조건을 넣어보자 const handleSubmit = ()=>{ if(state.author.length < 1){ alert("작성자의 이름을 입력해주세요"); return; } if(state.content.length < 5){ alert("내용을 5자이상 입력해주세요"); return; } alert("저장 성공"); } 그러면 이제 작성자, 내용에 조건문을 만들어서 조건식이 일치하지 않으면 입력을 강제하게 만들었다. 하지만 alert는 트렌드에 맞지 않기때문에 입력이 덜 되었다고 판단될 경우 focus를 주도록 바꿀거다. import { useRef, useState } f..

새로가는 프로젝트에서 뷰를 써야한대서 급 배우게 된 뷰 뷰? UI화면 개발 방법 중 하나인 MVVM패턴의 뷰 모델에 해당하는 화면단 라이브러리 용어 설명 뷰(View) 사용자에게 보이는 화면 돔(DOM) HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터트리 돔 리스너(DOM Listener) 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 모델(Model) 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 JS 객체형태로 저장 데이터바인딩(Data Binding) 뷰에 표시되는 내용과 모델의 데이터를 동기화 뷰 모델(View Model) 뷰-모델 중간영역. 돔리스너와 데이터바인딩 제공 MVVM ? Model - View - ViewModel 패턴..

리액트 프로젝트 생성 npx create-react-app simplediary 불필요한 테스트, 로고이미지 지우고 App.js 임포트 정리까지 해줬다 오늘의 학습목표! 다양한 사용자 입력 처리하기 npm start 로 서버 구동 DiaryEditor 컴포넌트 생성 import './App.css'; import DiaryEditor from './DiaryEditor'; function App() { return ( 일기장 ); } export default App; App.js에 임포트 해주고 서버 재구동하면 화면엔 안나오지만 F12 요소검사에서는 확인 할 수 있다 const DiaryEditor = () => { return ( 오늘의 일기 ) } export default DiaryEditor; ..

Props ? - 프로퍼티스의 줄임말. import React from "react"; import Counter from "./Counter"; import MyFooter from "./MyFooter"; import MyHeader from "./MyHeader"; function App(){ const number = 5; return ( ) } export default App; 프로퍼티스를 여러개 전달해 줄 수 있다. 하지만 이런식으로 props를 전달하면 길어지기때문에 자식컴포넌트에 보내줘야하는 prop들을 객체로 만들어 보내주는게 좋다 counterProps 객체를 만들고 할당시 스프레드 객체인 {...counterProps}로 받았다 import React, {useState} from ..

리액트에서의 상태 : 다크모드를 예시로 컴포넌트가 갖는 theme처럼 계속 값이 바뀔 동적 데이터 Counter 컴포넌트를 App 컴포넌트의 자식요소로 추가 import './App.css'; import MyHeader from './MyHeader'; import MyFooter from './MyFooter'; import Counter from './Counter'; const func = () => { return "func"; } const number = 5; function App() { return ( 안녕리액트 {func()} {number}는 : {number % 2 === 0 ? "짝수" : "홀수"} ); } export default App; + - 버튼에 아무런 동작도 정의하지..