'React' must be in scope when using JSX react/react-in-jsx-scope 위 같은 에러가 떳다면, 코드에서 jsx 문법을 인식하지 못하고 있는 것이다. import React from "react"; 를 코드에 넣어주자. 넣었다고? 그럼 // 잘못된 코드 import react from "React"; 로 되어 있는지 확인하자.

출처: https://ko.reactjs.org/docs/hooks-state.html useState를 호출하는 것은 무엇을 하는 걸까요? “state 변수”를 선언할 수 있습니다. 위에 선언한 변수는 count라고 부르지만 banana처럼 아무 이름으로 지어도 됩니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. useState의 인자로 무엇을 넘겨주어야 할까요? useState()Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 ..

https://velog.io/@bigbrothershin/React-Router Route : 특정 주소에 컴포넌트를 연결시킵니다. 주소에 따라서 다른 컴포넌트를 보여주도록 합니다. Link : Link 컴포넌트를 클릭하면 다른 주소로 이동시키게 합니다. * react에서는 를 사용하면 안됩니다. 왜냐하면, a태그는 페이지를 이동시키면서, 페이지를 아예 새로 불러오므로 SPA가 안됩니다. 새로 페이지가 렌더링 되면서, state 등의 요소들이 모두 초기화되기 때문입니다. Link는 HTML5 history api를 사용해서 브라우저의 주소만 바꾸고, 페이지를 새로 불러오지는 않습니다.

import {HashRouter, Route, Switch} from "react-router-dom"; 의 각 개념에 대해 알아보자. 출처: https://seungdols.tistory.com/769 Hash Router : react-router-dom은 단일 페이지 앱의 내비게이션 이력을 관리할 수 있는 다양한 방법을 제공한다. HashRouter는 클라이언트를 위해 설계된 라우터이며, Hash는 의 #를 뜻한다. 주소창의 현재 페이지 경로 뒤에 #를 입력하면, 브라우저는 서버요청을 보내지 않고, 현재 페이지에서 식별자에 해당하는 엘리먼트를 찾아서 위치를 보여준다. 즉, HashRouter를 사용하면 모든 경로앞에 #를 붙여서 서버요청을 보내지 않게 해준다. HashRouter는 백엔드를 사용하..

CRA를 통해서 react 프로젝트를 생성해보면 index.js 파일에 어김없이 라는 태그를 볼 수 있다. 그리고 지워도 아무런 에러가 생기지 않는다. 이것은 무엇일까? 지워도 되는 것일까? 리액트 공식문서에 따르면, "StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다." 라고 소개되어 있으며, 잠재적인 문제의 종류로는 다음과 같은 것들이 있다. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context API 검사 꼭 index.js에 쓰지 않아..

웹개발을 공부하기 위해서, 주변에 딱히 도움받을 곳도 없고, 그래서 선택한 것이 인강, 유투브를 보면서 클론코딩하는것을 따라해보는 것인데, 최근들어 네이버, 라인 채용설명회 및 개발자 분들의 영상을 보면서 한가지 느낀것이 있다. 그 분들이 원하는 것은 "나 이정도 까지 해봤다"가 아니었다. 나는 이것저것 경험해보기위해 클론코딩을 했으나, 솔직히 배운것을 100%능숙하게 쓰지는 못한다. 하지만 면접관 분들은 배운것에 대해 기본기와 성장가능성을 중요시 했다. 기본기는 코딩테스트와 전산지식인데 성장가능성은 클론코딩으로는 보여주기에 한계가 있다고 생각했다. 어떻게 해야 성장가능성을 높일 수 있을까? 생각해보니, 클론코딩처럼 남들이 하는 코드를 코드몽키마냥 필사하지 말고, 나 스스로 하나의 프로젝트를 통해서 기술..

react-helmet은 express의 helmet처럼 보안을 담당하는 라이브러리가 아니고, react에서 헤더값을 바꾸고 싶을 때 사용한다. (예를 들어 title) 다만, 이 방법을 사용하여 title을 변경할 시, 동적변경이기 때문에 크롤러에 잡히지 않는다는 특징이 있다고 한다.

'React' must be in scope when using JSX 에러는 import React from "react"; 코드가 빠져있을때 생기는 에러이다. import react from "react"; 로 되어있어도 에러가 난다.