함수 function getArea(){ 이 함수가 어떤 코드를 실행할 지 적음 } // 함수 선언식, 함수 선언 방식의 함수 생성 getArea(); console.log(”함수 실행 완료”); 소괄호의 역할은 매개변수를 전달하고 받는 과정하기 위함 getArea(매개변수); getArea(100, 200) 지역 변수 function getArea(width, height){ let area = width * height; // 지역변수 console.log(area); } // 함수 선언식, 함수 선언 방식의 함수 생성 let area1 = getArea(100, 200) console.log(area); 함수 외부에서 어디에서나 접근 할 수 있는게 전역 변수, 글로벌 변수라고 한다. let coun..

React context 1. react context의 필요성 우리는 일반적으로 부모컴포넌트 -> 자식컴포넌트로 데이터를 전달해준다. 이를 props를 사용했다. 그러나 부모->자식-> 그의 자식-> 그의 자식의 자식 / 이렇게 너무 깊어지면 prop drilling 현상이 일어난다. prop drilling의 문제점은 1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로 왔는지 파악이 어렵다. 2. 어떤 컴포넌트에서 오류가 발생할 경우 오류 파악이 어렵다. 출처 : https://www.copycat.dev/blog/react-context/ Your Guide To The React Context API - CopyCat Blog This article explains the drawbacks ..

useRef란? useRef는 React Hooks의 하나로, DOM 노드나 다른 React 컴포넌트와 관련된 값을 기억하고 업데이트 할 수 있는 객체를 생성한다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 콘솔을 확인해보면, ref이 값은 이렇게 출력된다. 이 뿐만 아니라 변경이 가능하다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useR..

useState useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 한다. const [state, setState] = useState(initialState); 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 코드와 같이 setState의 ( )안에 수정할 값이 아니라 함수를 넣는 것이다. 그리고 그 함수의 인자에서 현재 state를 가져올 수 있고, { }안에서는 이 값을 변경하는 코드를 작성할 수 있습니다. // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return curren..

useEffect를 사용하는 이유 useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무엇가를 실행하고 싶다거나 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무엇가를 실행하고 싶을 때 useEffect를 사용한다. useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React { useEffect } from 'react'로 import 해서 사용한다. useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다. 전체의 흐름은 아래와 같다. inpust 값을 입력 value 즉 state가 변경 state가 바뀌었기 때문에 → app 컴포넌트가 리렌더링 리..

let a = 3; if(a ≥ 5){ console.log(”5 이상입니다.”); } else { console.log(’5 이하입니다.’); } if(a ≥ 7){ console.log(”7 이상입니다.”); } else if ( a ≥ 5) { console.log(”5 이상입니다.”); } else { console.log(’5 이하입니다.’); } if가 거짓일 때 else if를 이용해서 여러가지 조건을 붙일 수 있다. else는 위에 있는 조건이 다 안맞는 경우 실행이 됨 let country = “ko”; if(country === “ko”) { console.log(”한국”); } else if (country === “JP”) { console.log(”일본”); } else if(co..