코딩.zip

App.js {/* children 요소로 들어감 */} 자식요소  ? div가 어떻게 Button 컴포넌트의 children props로 받아지는 이해가 가질 않았다.부모 jsx의 하위에 가 들어가 있기 때문에 div가 자식이라 children props를 받는거야? 아님 Button이 자식이기 때문에 children을 받는거야?! Button.jsx// props에는 반드시 객체 형태의 값이 들어옴// 점표기법으로 값에 접근하지 않고 '구조분해할당'으로 접근하면 더 편함export const Button = ({ text, color, children }) => { return( {text} - {color.toUpperCase()} {children} ..

🌎 글로벌 state 상태를 여러 컴포넌트 간에 공유하고, 이를 통해 데이터의 일관성을 유지하고 복잡한 상태 관리를 단순화 -context 사용하면 글로벌 값 관리 할 수 있다. ➡️ 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 필요 없이 데이터를 공유 context 넣은 값이 무언가 변경되면 그 context 참조하는 모든 컴포넌트 재렌더링하는데, 랜더링 최적화하고자 할 때 context에 넣는 데이터를 적절하게 분배해 여러 provider를 사용한다. Local state(특정 컴포넌트 내에서만 사용되는 상태)를 사용해 prop으로 전달되는 상태 값이 여러 단계의 컴포넌트를 거쳐 전달될 때, 문제 깊은 중첩 문제: prop으로 전달되는 상태 값이 여러 단계의 컴포넌트를 거쳐 전달될 경우, 중간 ..

🐾 재렌더링 발생 조건 state가 업데이트 된 컴포넌트 props가 변경된 컴포넌트 재렌더링 된 컴포넌트 아래의 모든 컴포넌트 ☻ 사전준비 실습 구조 src ├── App.js ├── components │ ├── Child1.jsx │ ├── Child2.jsx │ ├── Child3.jsx │ └── Child4.jsx ├── index.css ├── index.js 🔔 메모이제이션(memoization) - 함수의 반환 값을 저장해 두었다가 동일한 인수(argument)가 전달될 때, 이전에 계산한 값을 재사용하는 최적화,고속화 기법 ✔︎ 컴포넌트의 메모이제이션 - memo : 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하는 함수 App 컴포넌트가 재렌더링될 때, memo를 ..

방법 1. SCSS(Syntactically Awesome Style Sheets) css 프리프로페서, 변수, 중첩 규칙, 믹스인, 함수 등을 지원하여 CSS 코드를 보다 효율적으로 작성 scss 라이브러리 패키지 설치 : % npm install node-sass import classes from "./CssModules.module.scss" export const CssModules = () => { return ( CSS Modules입니다. 버튼 ); }; .container { border: solid 1px #aaa; border-radius: 20px; padding: 8px; margin: 8px; display: flex; justify-content: space-around; al..

💡 node.js 와 React 관계 node.js는 JavaScript Runtime 환경으로 React를 더 편하게 사용하도록 도와주는 오픈소스이다. node.js를 설치하면 NPM(Node Package Manager)이라는 패키지 관리자가 같이 설치되고 이것을 통해 React 개발에 필요한 다양한 모듈을 사용할 수 있다! React는 사용자 UI를 개발하는데 사용되는 자바스크립트 라이브러리이다. 가상 DOM을 사용해서 성능을 최적화 하고 실제 DOM 조작을 최소화하기 때문에 웹 애플리케이션 성능을 향상시키고 빠르게 렌더링이 가능해진다. (?) What's 'DOM' 1. DOM(Document Object Model)은 웹 페이지의 구조화된 표현을 제공하는 인터페이스이다. 2. DOM은 트리 구조..

리액트 라이브러리 (React Library) - 규모가 큰 자바스크립트 라이브러리 - 대규모 프론트엔드 웹 애플리케이션 개발, 리액트 네이티브 활용 → 스마트폰에서도 빠른 속도로 작동하는 애플리케이션 만들기 가능 라이브러리 프레임워크 차이 필요한 부분 선택적으로 가져와서 사용 규칙, 구조 바꿀 수 없음 그대로 써야함 JSX 기본 문법 {표현식} 클릭 // 또는 클릭 } - (e) => 을 통해 this.countUP을 정의하지 않고 바로 이벤트에 적용하는 방법 컴포넌트 배열 - this.state.fruits.map((item) => {...}) : fruits 배열의 각 항목을 순회해서 새로운 배열을 생성한다. ** map() 메서드 : 배열의 각 요소에 콜백 함수 실행 후 해당 요소를 변환하여 새로..