Today Hailie Learned

useReducer state 관리를 도와준다. 더 복잡한 state에 특히 유용하다. 여러 state가 함께 속해 있는 경우 여러 state가 같이 바뀌거나 서로 관련된 경우 👇 useState나 거기에서 얻은 state는 사용하거나 관리가 어려워지거나 오류가 발생하기 쉽다. 👇 이런 경우 useState 대신 useReducer를 쓸 수 있다. useReducer는 더 강력한 state 관리가 필요할 때 쓴다. (그렇다고 항상 사용은 x) useReducer를 사용하는 것이 항상 좋을때 다른 state를 기반으로 하는 state를 업데이트하면 하나의 state로 병합하는 것도 좋다. useReducer 의 구조 const [state, dispatchFn] = useReducer(reducerFn, ..

클린업 작업이 필요한 effect useEffect(() => { setFormIsValid( enteredEmail.includes("@") && enteredPassword.trim().length > 6 ); }, [enteredEmail, enteredPassword]); setFormIsValid()함수는 enteredEmail, enteredPassword가 변경될 때마다 state가 업데이트된다. ==>> 좋지 않다!! 함수 컴포넌트 실행이 트리거되서 리액트는 DOM에서 무언가를 변경하는 게 필요한 지 여부를 확인해야 한다. 그래서 enteredEmail, enteredPassword가 변경될 때마다 여부확인은 불필요하다. 내가 하고 싶은 것 1. 일정량의 키 입력을 수집하는 것. 2. 키 ..

모든 컴포넌트 재평가 후에 특정 의존성이 변경되는 경우 => 의존성 배열에 의존성으로 추가하면 된다. 기존 코드 const Login = (props) => { const [enteredEmail, setEnteredEmail] = useState(""); const [emailIsValid, setEmailIsValid] = useState(); const [enteredPassword, setEnteredPassword] = useState(""); const [passwordIsValid, setPasswordIsValid] = useState(); const [formIsValid, setFormIsValid] = useState(false); const emailChangeHandler = (e..

사이드 이펙트 = 이펙트 Side Effect 리액트의 주요 임무 UI를 렌더링 하는 것. 사용자 입력에 반응하여 필요할 때 UI를 다시 렌더링 하는 것이다. 사용자 입력에 따른 반응 화면에 보이게 하기 그렇다면 리액트의 사이드 이팩트는?? 주요 임무 외의 모든것! ex) http 리퀘스트를 보내는 것 or 브라우저 저장소에 무언가를 저장하는 것 or 타이머 간격 조정하는 것 사이드 이펙트는 직접적으로 컴포넌트 함수에 들어가서는 안된다. 그 이유는 버그나 무한 루프가 발생할 가능성이 높기 때문이다. 또는 http 리퀘스트가 너무 많이 보내질 수도 있다. 그래서 사이드 이팩트를 핸들링하는 훅을 사용하는 것이다. 그게 바로 useEffect이다. useEffect(()=> {}, [dependencies])..

버튼을 누르고 (데이터를 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..