리액트

이젠, Nav바 만들때 NavLink를 쓰자 - active일 때 CSS스타일링하기

홈페이지 하단에 네비바를 만들어야 했다. 네비 바를 만드는것 까지는 어렵지 않았으나, 해당 카테고리가 선택되었을 때 이미지 변경 & 글의 color변경하는 방법을 모르겠더라. location.pathname에 따른 img src 변경 페이지는 항상 location의 정보를 받아올 수 있는데, 콘솔에서 window.location을 찍어보면 확인할 수 있다. 참고로 window는 생략 가능하다. 이 pathname을 활용해서 이미지 src를 바꿔주는 방법을 택했다. location.pathname이 '/home'과 일치할 때 color 이미지로 변경, 그렇지 않은경우 흑백이미지로 두었다. NavLink styling하는 방법 여기서 중요한건 저 글씨색깔이었다. 리액트는 처음이다보니 자바스크립트처럼 간편하게..

searched.map is not a function - 리액트에서 Hook Flow를 이해한다는것

사건의 발단 데이터를 받아와 useState를 사용해서 화면에 뿌려주고 싶었다. 그리고 내가 받아올 데이터는 [배열] 이었다. (사실 이 기본을 생각하면 틀릴것도 없는 문제인데..) function Searched() { const [searched, setSearched] = useState('') const params = useParams(); const getSearched = async(name)=>{ const data = await fetch(`https://api.spoonacular.com/recipes/complexSearch?apiKey=${process.env.REACT_APP_API_KEY}&query=${name}&number=9`); const recipes = await da..

No routes matched location "/" 오류 간단해결방법(반전의 실수..)

사건의 발단 난 나의 Home 컴포넌트를 라우터를 사용해서 루트페이지로 설정하고 싶었다. 결과는 /와 매치되는 routes를 찾지 못했다며 오류. 간단 해결 방법 검색해보니 새로운 react-route flow에서 발생할 수 있는 이슈이며 간단히 코드스니펫을 추가해줌으로써 해결할 수 있다고 한다. 올해 업데이트되면서 이런일이 종종 있는듯? root페이지로 지정하고싶은 Route에 'index'를 추가해주면 된다. 결과 반전. Route 의 속성으로 path를 넣어줘야 하는데 to를 넣어준 것을 뒤늦게 발견했다... path로 바꾸고 index를 지우니 정상적으로 잘 작동한다.ㅜㅜ 이것때문에 몇분을 허비했는디 ㅜㅜ 아무튼 to로 잘못썼어도 index를 추가해주면 루트페이지가 잘 보인다는거..를 배움 참고자..

useCallback. [의존성 배열] 난 너만 바라봐

결론: [의존성 배열] 난 너만 바라봐. useCallback useCallback(() => { return value; }, [의존성배열]) const calculate = useCallback((num) => { return num + 1; }, [의존성배열] 이렇게 함수를 useCallback으로 감싸주면 이제 이 calculate라는 변수는 메모이제이션된 함수를 갖고있게된다. 이는 의존성 배열 안에있는 값이 변경될 때 에만 초기화된다. 이 useCallback이 필요한 이유를 알고 이해하기 위해 상황을 설정해보자. 상황설정 간단한다. 인풋하나와 버튼하나가 있다. 인풋값은 number만 들어간다. 그리고 useState를 사용하여 변경값을 input value에 넣어준다. 버튼의 변화를 감지하여 ..

영혼없이 썼던 import React from 'react' - 안써도 된다는데?

궁금했다. create-react-app 하면 항상 맨 위에 있길래. 그래서 찾아봤다. 아~ 최상위 API구나. 그래서 항상 기본처럼 딸려있었구나. (이렇게 react 모듈을 불러와서 실행해주는건 Node.js에서 지원해줌) 그럼 이녀석이 하는 일은 뭐냐? 그건 공식문서를 보면 알 수 있다. 이 import React를 이해하려면 JSX Transform이라는걸 먼저 알아야 한다. What’s a JSX Transform? Browsers don’t understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Ma..

콘솔로그가 왜 두번씩 출력되는거야? - StrictMode

사건의 발단 useEffect를 배우며 마운트과정을 콘솔에 찍어보다가, 첫 마운팅시에 콘솔로그가 두 번 찍힌다는걸 발견했다. 이 이후부터는 정상적으로 한번씩 찍혀 넘어가려고 했으나 찜찜한 마음에 검색을 해 보았는데, 원인이 index.js에서 루트에 컴포넌트를 렌더링 할 때 사용하는 라는 것을 알게되었다. 원인은 StrictMode 리액트를 배운지 얼마 안되서 그동안 아무 생각없이 따라치던 녀석인데, 이녀석이 원인일 줄은 몰랐다. StrictMode 는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로서, Fragment 와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다. -> 쉽게 말해 StrictMode는 개발도중 발생하는 문제를 감지하기 위한 설정으로 Moun..