공부 기록일지📚

글쓰다가 한번 쫙 다 날려서 욕한번 거하게 날리고 싶어요 티스토리.. 글 수정할때도 임시저장되게 해주세요.. 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를 업데이트하면 자동으로..

React.js의 State? - 데이터가 저장되는 곳, 값이 바뀔 데이터를 담는 곳 -컴포넌트에서 동적인 값을 상태(state)라고 부름 -리액트의 useState 라는 함수를 이용하면 컴포넌트에서 상태를 관리할 수 있다. why React? -리액트를 사용하면 변경된 부분만 업데이트할 수 있다.(UI에서 바뀐 부분만 업데이트 해줌) -react가 아닌 경우, 일반 JS를 쓴 브라우저는 노드 정보가 바뀔 때마다 노드 트리를 5단계에 걸쳐서 처음부터 다시 생성해야 한다. 반면, 리액트는 가상돔을 써서 우리 시야(UI)에 보이는 부분만 수정해서 보여주고 모든 업데이트가 끝나면 일괄로 합쳐서 실제 돔에 던져준다. (브라우저의 작동원리와 관련됨) * 렌더 = 렌더트리, 프론트엔트는 렌더트리 단계를 얼마나 최적..