✨참고 npm https://www.npmjs.com/package/html-react-parser API에서 가져온 문자열에 줄바꿈을 적용하고 싶을 때 html-react-parser를 사용하면 된다. json 파일에서 줄바꿈을 하고 싶은 부분에 `` 태그를 넣어주고, {Parser(data.info)}로 불러오면 줄바꿈을 할 수 있다.

useState useState란 함수형 컴포넌트에서 상태관리를 위해 사용되는 Hook이다. 첫번째 원소는 현재 상태(test), 두번째 원소는 Setter 함수(setTest)이다. Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정한다. ✨ 참고 https://react.vlpt.us/basic/07-useState.html useEffect 컴포넌트의 랜더링 이후 useEffect 함수를 실행함 첫 랜더링 시에만 useEffect를 실행싶다면 빈배열 []을 사용한다.

react-router v6에서 useHistory를 사용하니까 아래와 같은 오류가 발생했다. 찾아보니 react-router v6에서는 useHistory가 useNavigate로 변경되었다고한다. 아래와 같이 사용할 수 있다.

json-server Rest API url 주소와 메서드(POST, GET, PUT, DELETE)로 CRUD 요청을 하는 것 Create : POST Read : GET Update : PUT Delete : DELETE useEffect(() => { console.log('Count change'); }, [count]); // [conut]: 의존성 배열, 의존성 배열의 값이 변경되었을 때만 함수를 실행함 의존성 배열이 빈 배열이면 렌더링 직후 최초 한번만 실행됨 ✨ 참고 - 유튜브 '코딩앙마' 채널 https://www.youtube.com/watch?v=iCdcSti70lI&list=PLZKTXPmaJk8JfHAzPLH8CJHO_M33e7-&index=12

React Router 설치하기 package.json "dependencies" 에 "react-router-dom" 이 있는지 확인한다. ✨ 참고 https://www.youtube.com/watch?v=vI-XtNZdfg&list=PLZKTXPmaJk8JfHAzPLH8CJHOM33e7-&index=10 만약 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 에러가 발생한다면? 👀 해결방법 보러가기 https://velog.io/@minbok/2022-01-21-TIL

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 문제 해결 react-router-dom v6로 업데이트되면서 더 이상 Switch를 지원하지 않아서 생기는 문제라고 한다. v6의 변경사항 Switch는 Routes로 변경됌 exact는 사용하지않음 component 옵션이 element로 변경 ✨ 참고 https://miracleground.tistory.com/entry/Error-Switch-is-not-exported-from-react-router-dom-%ED%95%B4%EA%B2%B0 https://velog.io/@kcdoggo/Switch-is-not-exported-from-react-router-dom-%EC%97%90%EB%9F%AC

Changes not staged for commit:~ 문제 해결 git commit -m ' '을 하니까 갑자기 아래와 같은 문제가 발생했다. git init 하는 것으로 간단하게 해결되었다. 만약 이 방법으로 해결되지 않는다면, https://dubaiyu.tistory.com/8 이 블로그를 참고하면 좋을 것 같다. ✨참고 - 모달창 만들기 http://yoonbumtae.com/?p=3632 https://ko-de-dev-green.tistory.com/61

React 프로젝트 Github으로 배포 1) 패키지 설치 2) package.json 파일에 코드 추가 하기 3) 실행 하기 ✔ 문제발생 01. readme 파일이 나와요 Github Page Source를 gh-pages branch로 변경 02. npm run deploy하면 에러가 떠요 npm run deploy시 계속 아래의 오류가 발생했다. stackoverflow에서 해결방법을 찾았는데, 먼저 다음의 1,2단계를 수행 후, 1) package.json 에 다음을 추가한다. 2) 터미널에 다음을 입력한다. 다시 push하고 npm run deploy하는 것으로 해결할 수 있었다. ✨ 참고 - 배포하기 https://velog.io/@byjihye/react-github-pages

Pulling in API Data API로 부터 데이터를 가지오는 것은 React의 가장 일반적인 사용법중 하나이다. 만약 API와 친숙하지않거나 API를 연결하는 법을 모른다면, API가 무엇인지, API가 vanilla JavaScript에서 어떻게 사용되는지에 대하여 알려주는 'How to Connect to an API with JavaScript'를 읽어보는 것을 추천한다. ✨ How to Connect to an API with JavaScript 정리본 https://velog.io/@minbok/How-to-Connect-to-an-API-with-JavaScript fetch 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아옴 > let promise = fetch(url, [opti

react 공부를 제대로 해볼려고 책을 살까....했는데 일단 공식문서로 공부하고 자습서부터 따라 해보려고 한다. 리액트 책 두께가 거의 전공책이던데... 지금 사면 안 읽을 확률 15000%...😂 나는 나를 잘 알지 흐흐 공식문서는 https://ko.reactjs.org/ 여기서 볼 수 있다. ✨ 참고 https://www.taniarascia.com/getting-started-with-react/ Create React App React Developer Tools https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi JSX: JavaScript + XML React coded에서 사용하는 것은 HTML처럼 보이지만, JavaScript XML의 약자인 JSX 입니다. React를 사용하는데 있어서 반드시 JSX를