유니의 개발일지

List 목록 : 같은 아이템을 순서대로 모아 놓은 것 자료구조 : Array 이용 -> Array : JavaScript의 변수나 객체들을 하나의 변수로 묶어 놓은 것 Key 열쇠 : 각 객체나 아이템을 구분할 수 있는 고유한 문자열 여러 개의 Component 렌더링 하기 map() : 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것 ex) const doubled = numbers.map((number) => number * 2); -> 첫번째 아이템부터 순서대로 각 아이템의 어떠한 연산을 수행한 뒤에 최종 결과를 배열로 만들어서 리턴해줌 const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => {number}); ->..

Conditional Rendering 조건부 렌더링 : 어떠한 조건에 따라서 렌더링이 달라지는 것 Truthy : true는 아니지만 true로 여겨지는 값 Falsy : false는 아니지만 false로 여겨지는 값 Element Variables : 조건부 렌더링을 사용하다가 렌더링 해야 될 컴포넌트를 변수처럼 다루고 싶을 때 사용하는 방법 Inline Condition : 조건문을 코드 안에 집어넣는 것 In+Line = 코드를 별도로 분리된 곳에 작성하지 않고 해당 코드가 필요한 곳 안에 직접 집어넣는다는 것 Inline If : if문을 필요한 곳에 직접 넣어 사용하는 방법 -> && 논리 연산자 사용 양쪽 조건문이 모두 true인 경우에만 전체 결과가 true 가 됨 true && expre..

Event : 특정 사건을 의미함 ex) 버튼을 클릭한 사건 = 버튼 클릭 이벤트 Event Handling : 이벤트를 처리하는 것 DOM의 Event Activate React의 Event Activate -> onClick이 camel 표기법으로 적혀 있음 -> DOM에서는 이벤트를 처리할 함수를 문자열로 전달하지만 리액트에서는 함수 그대로 전달함 camel Case 카멜 표기법 : 첫 글자는 소문자로 시작하되, 중간에 나오는 새로운 단어의 첫 글자를 대문자로 사용 Event Handler / Event Listener : 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 어떤 사건이 발생하면 사건을 처리하는 역할을 하는 것 Event Handler 사용법 1) bind 사용 2) class ..

Accomodate.jsx import React, { useState, useEffect } from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; function Accommodate(props) { const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("======================="); console.log("useEffect() is called."); console.log(`isFull: ${isFull}`); ..

Hook의 규칙 (1) Hook은 무조건 최상위 레벨에서만 호출해야 한다. 최상위 레벨 : React 함수 컴포넌트의 최상위 레벨을 의미 -> 반복문이나 조건문 또는 중첩된 함수들 안에서 Hook을 호출하면 안된다는 의미 -> hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 함 (2) 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다. Hook은 React 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 Hook에서만 호출할 수 있음 eslint-plugin-react-hooks : hook의 규칙을 따르도록 강제해주는 플러그인 -> 이 플러그인을 사용하면 react 컴포넌트가 Hook의 규칙을 따르는지 아닌지 분석할 수 있음 eslint : JavaScript 코드에서 발견되는 문제..

useMemo() : Memoized value를 리턴하는 Hook -> Memoized value : Memoization 된 결과 값 -> 메모를 해두었다가 나중에 다시 사용하는 것 useMemo() 사용법 const memoizedValue = useMemo( () => { //연산량이 높은 작업을 수행하여 결과를 반환 return computeExpensiveValue(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); Memoization의 개념처럼 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create함수를 호출하여 결과값을 반환하며 그렇지 않은 경우에는 기존함수의 결과값을 그대로 반환함 컴포넌트가 다시 렌더링 될 때마다 연산량이 높은 작업을 반복하는 것을 ..

Component Class Component 생성자에서 state를 정의 setState() 함수를 통해 state 업데이트 Lifecycle methods 제공 Function Component state 사용불가 Lifecycle에 따른 기능 구현 불가 -> Hooks 기능 출현 -> class Component의 기능을 모두 구현할 수 있게 됨 Hooks 갈고리 : 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어들어가 같이 수행되는 것 hook의 이름은 모두 use로 시작함 가장 대표적인 Hooks useState() : state를 사용하기 위한 hook 사용법 const [변수명, set함수명] = useState(초기값); -> return 값으로 배열이 나옴 return된 배열에..

react component 중 class component와 관련된 내용 state 상태 JavaScript의 객체 리액트 component의 상태를 의미 -> 리액트 Component의 변경 가능한 데이터 개발자가 직접 정의함 중요한 점! 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 / 그렇지 않은 값은 컴포넌트의 인스턴스 필드로 정의하면 됨 -> state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 불필요한 경우에 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있기 때문 모든 클래스 컴포넌트에는 Constructor 함수가 존재함 -> 생성자 함수이며 클래스가 생성될 때 실행되는 함수 class component -> state..

실제 실습 내용 - create-react로 생성한 my-app 프로젝트에 chapter_05 폴더 생성 - Comment.jsx 코드 작성 import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justi..

실제 실습 내용 - create-react로 만든 my-app 프로젝트를 열어 chapter_04 폴더 생성 - Clock.jsx 코드 작성 import React from "react"; function Clock(props){ return ( 안녕, 리액트! 현재 시간 : {new Date().toLocaleTimeString()} ); } export default Clock; - index.js 코드 변경 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; i..