공부 기록일지📚

JSX에서 JavaScript를 쓸 때에는 {}중괄호 안에 자바스크립트를 써야 한다. component는 단지 jsx를 부르는 function(함수)일 뿐이다. react.js는 state를 변화시킬 때 component를 재실행(refresh)시킨다. -> 모든 코드가 재실행된다. UI의 관점으로 보면, 새로운 데이터가 들어올 때마다 자동으로 새로고침되니 좋은 일이라고 할 수 있다. 하지만 성능적으로 좋다고 할 수 있을까? 처음에만 실행되고 그 이후에는 state가 변경이 있더라도 실행되지 않게 하는 방법을 알아야 한다. 내 컴포넌트 내부의 몇몇 코드는 처음 딱 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 수 있기 때문이다. e.g.) API불러오기 또한, 특정한 코드만 변화했을 때 원하는 코드들..

All ref: https://velog.io/@kwonh/React-CRA-create-react-app-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 [React] CRA (create-react-app) 시작하기 안녕하세요!오늘부터 React관련 포스팅을 해보겠습니다.이 번 포스팅의 내용인 create-react-app, 이 하 "CRA" 에 대해 알아보겠습니다.개발 툴은 Visual Studio Code를 사용했습니다.React는 UI기능만 제공합 velog.io React를 시작하는 간편한 방법 CRA -react는 UI기능만 제공한다. 따라서 전역 상태관리, 라우팅, 빌드시스템을 개발자가 직접 구축해야 함 -angular와 같은 풀 스택 프레임워크와 대조 -그래서 react..

https://2hyes.tistory.com/91 Github: 깃헙에 프로젝트 올리는 법(윈도우) github에 가입이 되어있는 상태라는 가정 하에 방법을 작성하겠다. 사실 내가 자꾸 명령어를 까먹어서 쓰는 거다..🤦🏻‍♀️ 1. Git(깃)을 설치( https://git-scm.com/downloads ) OS에 맞는 것으로 설치해 2hyes.tistory.com 내 로컬에 있는 파일을 깃허브에 올리고싶은데 어떻게 해야할 지 모르겠어서 찾은 방법 -> 주의 사항이있다면 git으로 push할때 비밀번호가 깃허브 비밀번호가 아닌 깃허브 내에서 발급받는 엑세스 토큰을 사용하는 방법을 써야한다는 것이다. 깃헙에서 2021년 8월 13일부터 비밀번호를 이용한 인증이 제거됐고 git push와 같이 서버와의 ..

Create React App ? -빌드 구성없이 React 앱을 만들 수 있습니다. -많은 스크립트와 사전설정들을 해당 프로그램에서 준비해준다. (예를 들어 개발 서버에 접근한다든가, 자동으로 새로고침을 시켜준다든가, 즉각적으로 어플리케이션 안에 CSS를 포함시켜 준다는가 하는 기능 제공) -내 어플리케이션이 publish할 시점이 되면 create-react-app은 publish하는 명령어를 가지고 있다. 코드를 압축하고 좀 더 빠르게 만들어준다. ▶설치를 위해서 필요한 사전작업 (node.js, npm, npx 설치) node.js 설치 필요( nodejs.org에 가면 Recommended For Most Users ver을 다운 받으면 된다. e.g.14.18.0 LTS) -> 설치가 제대로 ..

글쓰다가 한번 쫙 다 날려서 욕한번 거하게 날리고 싶어요 티스토리.. 글 수정할때도 임시저장되게 해주세요.. React.memo() //불필요한 리렌더(re-render)를 막아주는 함수 React.memo는 고차 컴포넌트(Higher Order Component)입니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면 React.memo를 호출하고 결과를 메모라이징하도록 래핑하여 경우에 따라 성능 향상을 할 수 있다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. -> 리액트 룰에 따르면 부모 컴포넌트에서 state가 바뀌면 자식 컴포넌트들이 전부 리렌더링된다. 이렇게 되면 실제로 state가 변경된 컴포넌트는 하나일 뿐인데 나머지 자식 컴포넌트들도 리렌더..

Props? -Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방법이다. -props는 내가 만든 컴포넌트로 전달되는 속성들을 모아놓은 객체이다. 첫번째이자 마지막 인자(2번째 인자는 없음) ▶prop 작성 시 주의사항 props를 작성할 때 , space(공백)가 있으면 안됩니다 text = {12} //space있는 경우 (X) text={12} //space없이 올바르게 작성한 경우(O) prop을 전달할 때의 이름과 받아서 사용할 때의 이름이 동일해야만 한다. //prop 받아서 사용할 때 function Btn({ text, ftSize = 16 }) { return ( {text} ); } //prop 전달 할 때 function App() { return..

▶JSX에 대해서 더 알아보기 -알다시피 JSX는 HTML과 매우 유사하다. 그렇기 때문에 JSX로 만들어진 것들을 HTML로 써도 문제가 없다. 그렇지만 주의할 점이 있다. label태그를 예시로 들어보자. *label: input옆에 써주는 글씨, label을 누르면 옆에 input이 선택된다. input과 label을 연결하기 위해서는 input에 id가 필요하다. input의 아이디명과 label의 for 속성명이 같으면 된다. ->in HTML의 경우 Supur Converter Minutes Hours -> 해당 코드가 브라우저에서 정상적으로 돌아가는 이유는 우리가 react.production.min.js를 사용하기 때문이다. production을 development로 바꾼다면 에러 메세지..

여태까지 React 컴포넌트 안에서 데이터를 어떻게 바꾸는 지 배워봤다. 우리가 룰에 맞춰 데이터를 변경했을 때, 리액트가 화면을 어떻게 refresh하는 지 봤습니다. 여기서 refresh란 리렌더링을 말합니다. modifier 함수를 이용해서 컴포넌트의 state를 바꿀 때, 컴포넌트는 새로운 값을 갖고 리렌더링된다(=컴포넌트가 재생성된다). 데이터가 바뀔 때마다 컴포넌트를 리렌더링하고 UI를 refresh한다. -> 결론적으로 바닐라 js 를 리액트가 완벽하게 대체하게 됩니다. HTML요소를 생성하거나 찾을 필요도 없고 이벤트리스너를 더해줄 필요도 UI를 업데이트해줄 필요도 없어지게 됩니다. 리액트를 사용하면, 바로 HTML을 만들고 그곳에 이벤트리스너를 더할 수 있으며 UI를 업데이트하면 자동으로..