react

useEffect와 useRef를 사용하여 렌더링의 이유를 밝힐 수 있음. memo를 사용 최후의 수단으로 useMemo사용 react developers tool에서 전부다 초록이면 최적화가 급하지는 않음. 하지만 빨간색이면 최적화를 해야함

리액트로 배열을 렌더링 할 때 다음과 같은 문구를 마주치신 적이 있나요? Warning: Each child in a list should have a unique "key" prop. 브라우저 콘솔에 이러한 경고가 나오게 됩니다. 이는 리액트에서 배열을 렌더링 할 때 렌더링한 리스트들의 추가, 삽입, 삭제의 기준을 Key Prop을 이용해서 하기 때문에 이를 적어주지 않아서 나타나는 오류 입니다. 예를들어서 영화리뷰들이 있는 게시판이 있습니다. 각각의 영화 리뷰들을 렌더링 하는데 반복문으로 렌더링 할 수 있겠죠? 이때 key prop을 지정해주지 않고 리뷰에 있는 input태그 안에 텍스트를 입력하고 그 리뷰를 삭제했다면 어떻게 될까요? 리뷰는 삭제가 될 수 있어도 input 태그 안의 텍스트는 다른 ..

1. UI가 복잡할수록 DOM 조작이 매우 불편해진다. 페이스북 같이 UI가 많고 이벤트도 많은 웹에서는 DOM 조작이 매우 복잡합니다. 가령 태그를 만들고 그 안에 컨텐츠와 클래스 이름을 넣는다고 하면 벌써 코드가 3줄 이상입니다. 흔히 명령형 방식이라고 하죠. 하지만 리액트는 컴포넌트로 선언적으로 작성하여 유지보수가 훨씬 쉽습니다. 2. SPA 1번의 연장선으로서 SPA를 쓰면 DOM조작이 매우 빈번하게 일어나는데 이때 바닐라 자바스크립트를 이용해 구현하여 매우 복잡해집니다. 따라서 리액트로 쉽게 SPA를 만들 수 있습니다. 3. 제로초강의를 참고하자면 페이스북 웹에서 데이터를 바꿨더니 적용이 안되는 부분이 있었다는 것입니다. 예를들어 닉네임을 바꿨는데 내 프로필에는 제대로 변경된 닉네임이 보여지고 ..

시중에 많은 리액트 강의들의 대부분은 CRA부터 사용하여 webpack에 대한 설정과 바벨의 대한 설정을 가르치지 않고 바로 리액트의 핵심 기능들을 설명한다. 나는 처음에 이러한 강의에 불만을 느꼈고 혼자 구글에서 CRA없이 리액트 프로젝트 만드는 법을 찾았었다. 이런 강의들은 그저 리액트의 기능들을 나열하여 가르치겠다는 거고 그렇다 보니 강의를 들었다 할지라도 차후에 강의를 보고 얻은 지식으로 만든 프로젝트의 퀄리티가 (심하게 말하자면)매우 구렸다. 그리고.. 그건 바로 기본을 안 다져서 그렇다. 리액트에서 state가 뭔지 제대로 이해해야 하는데 단순 기능만을 설명하는 강의에서는 그런 종류의 습득은 불가능 하다. 그 와중에 나는 제로초강의를 알게되었다 웹팩 설정을 가르친다니!! 여기서 부터 다른 강의..

npm init react-app . 위와 같이 터미널에 입력한다. 여기서 ' . " 은 현재 디렉터리를 의미한다. create-react-app 을 설치할 거냐고 물어본다. y를 입력하면 된다. 이 과정을 끝내면 아래와 같이 여러 폴더 및 파일들이 자동으로 생긴다.

1. npm run build 실행!! 2. 아래와 같이 package.json 에 추가 위에서 dist 파일은 지정해준 build 폴더의 경로 3. github pages 설치 npm install gh-pages --save-dev 4. 다시 package.json 추가 "deploy": "gh-pages -d build" 나의 경우는 build를 dist로 바꾸었다. 5. npm run deploy 실행 npm run deploy 6. 위와 같이 gh-pages가 만들어졌으니 pages에서 gh-pages 브런치를 선택! 7. 호스팅 완료!! 8. reference https://velog.io/@heony/gh-pages gh-pages로 내 React 웹사이트 배포하기 GitHub 레포지토리의 ..

1. 리액트를 사용하고 싶은 프로젝트의 디렉터리에 들어간다. 2. 아래의 명령어를 통해 노드 프로젝트를 생성-초기화 하며 package.json을 만든다 npm init -y 3. JSX 컴파일을 위한 Babel을 설치한다. npm install --save-dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react babel-loader는 웹팩과 같이 사용하기 위해 다운해준다. 4. Webpack 설치 npm install --save-dev webpack webpack-cli webpack-dev-server 5. htmlWebpackPlugin 설치 npm install --save-dev html-webpack-plu..