공부 기록일지📚

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를 업데이트하면 자동으로..