초보 개발자의 성장 일기

export const Navigation = styled.ul` display: flex; gap: 20px; li { font-size: 18px; font-weight: 800; cursor: pointer; border-bottom: 1px solid ${(props) => props.theme.color.white}; &:hover { border-bottom: 1px solid ${(props) => props.theme.color.gray}; } } `; 메뉴에 hover했을 때 아래에 밑줄이 가도록 border-bottom 속성을 넣어주었으나 미세하게 글씨가 움직인다. export const Navigation = styled.ul` display: flex; gap: 20px; li { ..

API를 fetch하고 데이터를 map으로 할당하다보면 제대로 데이터를 불러왔지만 map을 읽을 수 없다는 오류를 보게된다. 이때 data를 console로 찍으면 빈 배열이 나오게 된다. 이유가 무엇일까? 데이터를 fetch하는 함수가 비동기식이기 때문이다. 데이터를 불러오기전에 데이터를 할당 해 데이터의 할당 항목을 알 수 없는 것이었다. 이것은 간단하게 해결이 가능하다. if (!data) return ; 데이터가 없으면(즉 거짓이면) 빈 를 넣는 것이다. 데이터가 있을 때는 if안의 값이 거짓이 되어 데이터를 할당 할 수 있게 되는 것이다. 하지만 이렇게 하다보면 데이터 양이 많아질 때 데이터를 불러오는 동안 빈 화면이 보여지면 사용자 입장에서는 데이터를 불러오는건지, 원래 빈 화면인지 알 수 없..

로그인 폼을 구현하다가 사용자가 로그인할 때 입력폼에 아무것도 입력되지 않으면 로그인 버튼을 비활성화를 해야할지 입력 폼에 focus를 주어야 할지 고민이 들었다. 입력을 안했을 때 버튼 자체가 비활성화가 되는것도 좋지만, 로그인 버튼을 눌렀을 때 어떤 입력폼에 입력을 해야할지 focus를 주면 사용자 입장에서 더 편리할 수도 있겠다는 생각이 들었다. 무엇을 입력해야 하는지 알 수 있고, focus를 주면 사용자가 바로 입력하기 편리할 것 같다는 생각이 들었다. 1. focus를 줄 수 있는 activate 함수 만들기 const Input = (props) => { const inputRef = useRef(); const activate = () => { inputRef.current.focus();..

리액트 훅이란? use로 시작하는 모든 함수를 의미한다. 1. 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅에서만 호출해야 한다. 컴포넌트 함수가 아닌 일반 return하는 함수에서는 적용할 수 없다. 2. 리액트 컴포넌트 함수 사용자 정의 훅 함수의 최상위 수준에서 직접 호출해야 한다. 중첩 함수, block문에서 훅을 호출하면 안된다. if문에서도 허용되지 않는다. 3. 참조하는 모든 항목의 의존성으로 useEffect 내부에 추가해야 한다. useReducer 또는 useState에 의해 노출된 state 업데이트 함수는 변경되지 않도록 리액트가 보장한다.