Today Hailie Learned

번들링이란? 프론트엔드 개발에서 번들링은 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정이다. => 사용자에게 배포하기 위해 번들링이 꼭 필요하다. Webpack 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러*이고, 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다. * 모듈 번들러는 HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구이다. Webpack에서의 모듈은 JS의 모듈에만 국한하지 않고, HTML, CSS, .jpg, .png 같은 이미지 파일도 전부 포함한 포괄적인 개념이다. Webpack은 주요 구성 요소인 로더(loader)를 ..

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 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

문제점 1. 업데이트 하는 Modal 부분에서 사진 수정이 안된다. (미리보기도 안되고, 서버한테 사진 데이터 못넘겨줌) 기존 코드 //Modal.js const [photo, setPhoto] = useState(data.photo); // const photoUpdateHandler = (event) => { // let fileInput = false; // if (event.target.files[0]) { // fileInput = true; // } // if (fileInput) { // try { // Resizer.imageFileResizer( // event.target.files[0], // 150, // 150, // "png", // 90, // 0, // (uri) => { /..