유니의 개발일지

Calculator.jsx import React, { useState } from "react"; import TemperatureInput from "./TemperatureInput"; function BoilingVerdict(props){ if(props.celsius >= 100){ return 물이 끓습니다.; } return 물이 끓지 않습니다.; } function toCelsius(fahrenheit){ return ((fahrenheit - 32) * 5)/9; } function toFahrenheit(celsius){ return (celsius * 9) / 5 + 32; } function tryConvert(temperature, convert){ const input = pa..

Lifting State Up : 여러 개의 컴포넌트들 사이에서 state를 공유하는 방법 Shared State 공유된 state : state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용하는 것 하위 컴포넌트에서 state 공유하기 1) 물의 끓음 여부를 알려주는 컴포넌트 function BoilingVerdict(props) { if (props.celsius >= 100) { return 물이 끓습니다.; } return 물이 끓지 않습니다. ; } : 섭씨온도 값을 props로 받아서 물이 끓는지 안 끓는지를 문자열로 출력해주는 컴포넌트 2) 이 컴포넌트를 실제로 사용하는 부모 컴포넌트 fun..

SignUp.jsx 코드 import React, { useState } from "react"; function SignUp(props){ const [name, setName] = useState(""); const [gender, setGender] = useState("남자"); const handleChangeName = (event) => { setName(event.target.value); }; const handleChangeGender = (event) =>{ setGender(event.target.value); }; const handleSubmit = (event) => { alert(`이름 : ${name}, 성별: ${gender}`); event.preventDefault()..

Forms : 사용자로부터 입력을 받기 위해 사용하는 것 React에서의 Form vs. HTML의 Form React = 컴포넌트 내부에서 state를 통해 데이터를 관리 HTML = 엘리먼트 내부에 각각의 state가 존재함 Controlled Components : 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트 누군가의 통제를 받는 컴포넌트 -> 누군가 = React => 값이 리액트의 통제를 받는 input Form Element 리액트에서 모든 값을 통제할 수 있는 구조를 가지고 있음 -> 입력 양식의 초기 값을 내가 원하는 대로 넣어줄 수도 있으며 다른 양식의 값이 변경되었을 때 또 다른 양식의 값도 자동으로 변경시킬 수 있다는 것 HTML Form 은 자체적으로 state를..

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함수를 호출하여 결과값을 반환하며 그렇지 않은 경우에는 기존함수의 결과값을 그대로 반환함 컴포넌트가 다시 렌더링 될 때마다 연산량이 높은 작업을 반복하는 것을 ..