차근차근 배움터

React에서 컴포넌트 리스트를 렌더링할 때 key prop을 지정하는 이유는 React의 내부적인 동작과 성능 최적화를 위해서입니다. key prop은 각 컴포넌트의 고유성을 나타내는 식별자로 사용됩니다. key prop이 제공되면 React는 컴포넌트 간의 변경을 효율적으로 추적할 수 있습니다. React는 key 값을 이용하여 변경된 컴포넌트를 식별하고, 변경된 컴포넌트만 업데이트합니다. 이는 성능 향상을 위해 컴포넌트 재사용을 최대화하고, 필요한 부분만 업데이트하여 리렌더링을 줄입니다. 예를 들어, 컴포넌트 리스트를 렌더링할 때 key prop을 사용하지 않으면 컴포넌트가 추가, 제거 또는 재정렬될 때 React는 전체 리스트를 비교해야 합니다. 이는 비효율적인 동작이며, 성능 저하를 유발할 수 ..

React js는 어플리케이션이 아주 interactive하게 만들어주는 library이다 react-dom은 library, package인데 모든 React element 들이 HTML body에 둘 수 있게 해 준다. React JS는 엔진 같은 역할 => 암기하지 말고 이해해보려 해라 ReactDOM.render(); render() 유저에게 보여주는 것 브라우저가 JSX를 이해할 수 있도록 BABEL을 설치해야 한다. 컴포넌트에 위와 같이 속성 이름과 값을 지정하면 function에서 props로 변수를 받아서 props.banana와 같이 꺼낼 수 있다 이렇게 컴포넌트에 작성되어 있는 onClick 은 이벤트 리스너가 아니라 하나의 props 이다 컴포넌트를 re-rendering하고 싶지 않..

npx create-react-app과 npm init은 둘 다 프로젝트를 생성하는 데 사용되는 명령어입니다. 그러나 그들은 서로 다른 목적을 가지고 있습니다. npm init: npm init 명령어는 새로운 Node.js 프로젝트를 시작할 때 사용됩니다. 이 명령어를 실행하면 프로젝트의 package.json 파일을 생성합니다. package.json 파일은 프로젝트의 메타데이터와 종속성(dependencies) 정보를 포함하고 있습니다. npm init은 프로젝트의 기본 설정을 위해 몇 가지 질문을 하고, 사용자로부터 입력을 받아 package.json 파일을 생성합니다. 이후에는 npm install을 사용하여 package.json에 명시된 종속성들을 설치할 수 있습니다. 이 명령어는 React..

scroll bar를 없애려고 했더니 그럼 스크롤 할 수 있는지 모를 것 같아서 (디자인에 자신은 없지만) 스크롤바를 만드는 대신 예쁘게 꾸며보려 한다 .description { margin: 0; height: 222px; padding: 12px; /* background-color: red; */ border: solid 1px red; overflow: scroll; } .description::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/ color: blue; } .description::-webkit-scrollbar-thumb { background-color: rgb(69, 164, 45); /*스크롤바의 색상*/ } .description::-webki..

#7.10 Next Steps breaking change 버전 1에서 코드를 작성했는데 버전이 올라가면서 깨지는 현상 새로운 버전에 맞춰서 코드를 수정해야 하는 일이 발생한다 그러나 React js 에서는 breaking change 현상이 없다 예전 버전의 코드 방식을 그대로 갖다 써도 React.js에서는 깨지는 현상이 없다 useState()와 useEffect()가 최고의 조합이라고 생각한다 구버전의 리액트 코드들도 배우는 강의가 있지만 나는 일단 패스 영화 웹사이트 완성 React App yujinkimkr.github.io 일단 완성 및 배포했고 나머지 수정 사항들은 아래로 정리할 수 있을 것 같다 그리고 다른 리액트 강의들을 또 찾아서 들어보려고 한다 1) Detail.js에서 Descri..

gh-pages 라는 툴을 설치한다 $ npm i gh-pages gh-pages란? 결과물을 github pages에 업로드 할 수 있게 해주는 나이스한 패키지 package.json에 있는 scripts를 먼저 확인 script의 build를 실행하면 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 웹사이트의 production ready code를 생성하게 된다 production ready란 => 코드가 압축되고 모든 것이 최적화된다는 뜻 $ npm run build 아래 명령어를 실행하고 나면 ..

아무세팅도 안 했는데 업로드를 하려고 한다면 먼저 git 설치 github 가입 및 레포지토리를 하나 만든다 react-movie-list 라는 이름으로 만들고 git remote add origin https://github 주소

.aaa:not(:nth-child(2))::after { content: "helloooooo"; } 순서를 보면 not 먼저 그리고 그 괄호 안에 nth-child 그리고 마지막에 ::after를 사용해야 한닷

::after 나 ::before 를 이용해서 content 공백을 넣고 싶은데 적용이 안돼서 한참을 고민했다. li::after { content: ",\00a0" } 이 경우에는 content에 들어가는 특수 기호를 확인해야 한다

JSX 문법으로 이미지 태그를 하려고 하는데 적용이 안된다? 알고보니 react 에서는 기존 img 태그 넣듯이 하는 것이 아니라 image를 import 먼저 해야 한다. 아래처럼 import 먼저하고 {} 안에 컴포넌트를 넣어주면 끝 어렵지 않으나 그냥 몰랐던 사실! import loader from '../images/loading.gif'; return ( );