Today Hailie Learned

버튼을 누르고 (데이터를 submit 하고) 입력된 것 지우기 양방향 바인딩을 사용하자 변경되는 입력값만 수신하는 것이 아니라 입력에 새로운 값을 다시 전달할 수도 있다!! 그래서 프로그램에 따라 입력값을 재설정하거나 입력할 수 있다. const [enteredDate, setEnteredDate] = useState(new Date()); const [enteredWeight, setEnteredWeight] = useState(""); 상태 변경을 관리하는 함수를 활용하면 되는데, const submitHandler = async (event) => { event.preventDefault(); const inputData = { date: new Date(enteredDate), weight: en..

리액트 핵심 1 . 만약 변화하는 데이터를 가지고 있는데 그 변화하는 데이터가 사용자 인터페이스에 반영되어야 한다면 state가 필요하다. 왜냐면 일반적인 변수는 수행하지 않지만 state를 사용하면 값을 설정하고 변경할 수 있기 때문이다. 그리고 state가 바뀌면 리액트는 그 state가 등록된 컴포넌트를 재평가할 것이다. 그리고 다른 컴포넌트는 빼고 그 컴포넌트만 재평가할 것이다. state가 등록된 그 컴포넌트만!! 리액트 핵심 2 . 리액트는 컴포넌트 별 인스턴스를 기반으로 해서 독립적인 state를 갖는다. 1. 가장 일반적은 useState 사용법 const ExpenseForm = () => { const [enteredTitle, setEnteredTtile] = useState('');..

Change Title ➥ 이렇게 코드를 쓰면, 이 코드 라인이 분석되었을때 자바스크립트가 이것 실행할것이다. 그리고 JSX코드가 반환될 때 이 코드 라인이 분석된다. 즉, 클릭할 때 clickHandler가 실행되는 것이 아니라 JSX코드가 평가될 때 실행된다. 이게 너무 이르기 때문에 clickHandler라고 지정만 해주면 된다. 👇👇👇 Change Title 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

리액트로 CRUD를 구현하던 중에, 유저가 빈칸을 입력하면 입력이 되지 않도록 하는 코드 입니다. 부모 파일인 App.js에서는 Create에 대한 handler를 자식 파일에게 props로 전달해줍니다. const addGoalHandler = (enteredText) => { setCourseGoals((prevGoals) => { const updatedGoals = [...prevGoals]; updatedGoals.unshift({ text: enteredText, id: Math.random().toString() }); return updatedGoals; }); }; 그리고 자식에서는 그 props를 받아서 submit을 하기 전에, 현재 값의 길이가 0이면 그냥 return 을 해줍니다...

리액트로 일기장을 만드는 토이 프로젝트 중에 날짜 형식을 바꾸고 싶었다. 현재 날짜 형식 클라이언트에서 보내주는 날짜는 아래와 같다. new Date() 나는 2022년 07월 20일 이런 형식으로 나타내고 싶었고, 내가 아는 자바스크립트 문법으로 아래와 같이 코드를 짰다. const year = data.date.getFullYear(); const month ={data}.date.getMonth() + 1; const date = {data.date}.getDate(); const showFilteredDate = `${year}년${month

Storybook이란? ➥ CDD (Component Driven Development)를 하기 위한 도구 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 👉 전체 UI를 한눈에 보고 개발 가능! 주요 기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기 장점 1. 컴포넌트 문서화 👉 재사용성 확대 2. 자동으로 컴포넌트 시각화 👉 시뮬레이션 할 수 있는 다양한 테스트 상태 확인 가능 👉 버그 사전에 차단 가능 3. 테스트 및 개발 속도 개선 Storybook 설치 방법 // 리액트 프로젝트를 다운받았다는 가정 하에, npx storyboo..

CDD ( Component Driven Development ) ➥ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 ➥ 재사용할 수 있는 컴포넌트를 개발한다. ➥ 상향식 개발 Styled-Component (CSS-in-JS가 나오게 된 배경) CSS 전처리기 ( CSS Preprocessor ) ➥ CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 * 각 CSS 전처리기에 맞는 Compiler를 사용해야 한다. (CSS 전처리기 자체만으로는 웹 서버가 인지하지 못함) ➥ 그래서 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생긴 것이다. - CSS 전처리기로 가장 유명한 SASS (CSS를 확장해 주는 스크립팅 언어) 장점 :..

useState const [changeData, setChangeData] = useState('') useState는 리액트 라이브러리에서 제공하는 함수인데 컴포넌트 함수가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 state로 값을 정의할 수 있게 해주는 함수이다. state가 변할 때, 이 컴포넌트 함수를 다시 호출하고 싶으면 state를 업데이트하는 함수(set어쩌고)를 호출하면 된다. 왜냐하면 그 함수를 호출해서 state에 새로운 값을 할당하고 싶다고 리액트에게 말하고 그런 다음 함수는 또한 useState로 state가 등록된 컴포넌트는 재평가되어야한다고 리액트에게 말한다. 그래서 리액트는 이 컴포넌트 함수를 다시 실행하고 또한 이 JSX코드를 다시 평가한다. 그리고 지난 번과 비교해..

방법 1. export default를 써주고 import로 받기 예시 - 내보낼 파일 const person = { name:'Max' } export default person 예시 - 받을 파일 (정확한 이름을 써주지 않아도 된다) import person from './person.js' import prs from './person.js' 방법 2. export만 써주고 중괄호 써서 import하기. (파일 안에서 정의된 정확한 이름 사용) 예시1 - 내보낼 파일 const person = { name:'Max' } 예시1 - 받을 파일 import {person} from './person.js' 한 문장으로 작성도 가능하다. 예시2 - 내보낼 파일 export const clean = () ..

React에서 데이터를 다루는 두 가지 방법인 State와 Props State와 Props 차이 Props: 외부로부터 전달받은 값 (인자와 같이 넘겨받을 수 있다.) 함부로 변경될 수 없는 읽기 전용(read-only) 객체 State: 컴포넌트 내부에서 변화하는 값 어떤 것이 State와 Props에 적합할까? 이름 / Props 성별 / Props 나이 / State (매년 바뀜) 현재 사는 곳 / State (이사할때마다 바뀜) 취업 여부 / State (내 상태에 따라 바뀜) 결혼/ 연애 여부 / State (내 상태에 따라 바뀜) Toggle Switch / State (스위치를 on/off 여부에 따라 바뀜 // isOn:true, isOn:false) Props의 특징 - 컴포넌..