Front-End Developer

Router v6 헷갈려서 공부해봤다. 기초정리

Router package.json 파일에 들어가 현재 라우터의 버전을 확인해보자. Router 설치하기 npm install react-router-dom@6 index.js파일에 BrowserRouter import하기 import { BrowserRouter as Router } from 'react-router-dom'; //그냥 BrowserRouter로 써도 되지만 더 짧게 쓰려고 Router로 import 기본적으로 Route를 할때는 아래의 구조를 같는다. const container = document.getElementById('root'); const root = createRoot(container); root.render( ); 만약 Router 안에 Routes와 Route를 다..

React를 한다면 무조건 알아야 할 - useRef 1편

결론: 이거 잘 외워둬라. 기본 사용법 const ref = useRef(value) //ref 안의 객체에 아래와 같은 형태로 저장이 된다. { current: value } //언제든 수정가능 ref.current = 'hello' { current. 'hello' } state와 비슷하게 저장공간으로 사용된다. DOM 요소에 접근할 수 있다. input요소를 클릭하지 않아도, 로그인화면에서 자동으로 아이디입력칸에 포커스가 되어있으면 편하겠지? Ref를 사용해서 이런작업을 편리하게 할 수 있다. 마치 JS의 document.queryselector와 같다! (2편에서 배워보자) Ref는 아무리 수정을 해도 다시 렌더링 시키지 않는다! import React, { useState, useRef } fr..

영혼없이 썼던 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..

리액트.... 이미지가 액박이 뜬다고?

결론: 응 원래 하던대로 하는거 아니야 사건의 발단 리액트를 배우기 시작하고 컴포넌트들을 만들어보다가, 이미지를 추가했다. 음..맞는데? 파일경로 파일이름 다 맞는데? 아~ 리액트에서는 파일경로도 중괄호 안에 넣나보다~ 검색해보니 create-react-app과같이 핫 모듈 로딩을 제공하는 웹팩을 사용하는 경우에는 이미지를 불러오는 방법이 달랐던 것! 웹팩을 사용하고 JSX문법을 사용하는 경우에는 아래처럼 두가지 경우로 이미지를 불러올 수 있다. 해결방법 require('image').default 사용하기 검색에서는 뒤에 .default를 붙이지 않아도 잘 불러오는 것 같았는데, 나의 경우에는 .default를 붙여야만 불러왔고 그렇지 않은 경우에는 엑박이 나왔다. import해서 사용하기 파일 최상단..

JS기초가 부족하면 React가 망한다는 말 진짜였네

결론: JS 기초 제대로 안 해놓으면 멸망 문제의 발단 리액트를 배운 첫날, 나는 '수정버튼'을 누르면 글제목 안의 첫번째 인덱스인 '남자 코트 추천'을 '여자 코트 추천' 으로 바뀌도록 만들라는 지령을 받았다. function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( 수정버튼 ) } 기존 state의 첫번째 요소만 살짝 변경해주고 state변경함수에 집어넣는 식으로 해보았다. 원본은 건들이면 좋을게 없기 때문에 copy를 하나 만들어서 만들었다. function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return..