Coding Study/React(21)
-
React Context (React 전역상태관리 API)
prop drilling최상위 Component 에서 상태를 관리해야 하고 값을 전달해주려고 할때 아래 그림과 같이 최하위 컴포넌트에 전달하기 위해서는4단계나 건너서 전달해 주어야 한다. 하지만 이거보다 더 많은 컴포넌트가 중간에 있다면 ......Project 전체적으로 사용하는 데이터를 전역 데이터라고하는데 이것을 props와 state 로만 관리하게 되면 여러곳으로 내려줘야 한다는 문제점이 있다.이때 prop을 내려주는게 드릴로 땅을 파는 것 같다고 해서 이런 문제점을 prop drilling 이라고 부른다.이런문제점을 해결하기 위해서 React 에서 React Context 를 만들었다. React Context 적용방법Context API는 다음 3단계를 통해 사용할 수 있다.**create..
2025.04.08 -
React useState의 콜백인자
콜백 인자에 대해 설명 하기 전에 useState 는 비동기적으로 값이 바뀐다.아래 코드의 setCount2 아래에 console 에 값을 출력 해 보면 처음에 버튼 클릭 시 "0" 이 출력이 되고 두번째 클릭에는"1" 이 출력이 된다. 첫번째 클릭 시 count work: 1 statecount2 : 0 화면 출력값 state : 1두번째 클릭 시count work: 1 statecount2 : 1 화면 출력값 state : 2두번째 클릭 시count work: 1 statecount2 : 2 화면 출력값 state :..
2025.04.04 -
Node.js
🚀 Node.js란? 브라우저 밖에서도 JavaScript를 실행하자! HTML, CSS, JavaScript를 사용해 웹사이트를 만들 때 따로 JavaScript를 설치한 적은 없을텐데어떻게 JavaScript를 사용할 수 있었나? ✅ 브라우저에서 JavaScript가 실행되는 원리브라우저에서 JavaScript를 실행할 수 있었던 이유는 브라우저 자체에 JavaScript 엔진이 내장되어 있기 때문HTML과 CSS는 렌더링 엔진을 통해 해석됨.JavaScript는 JavaScript 엔진을 통해 실행됨.🔹 브라우저별 JavaScript 엔진Chrome / Edge → V8 엔진Firefox → SpiderMonkey 엔진Safari → JavaScriptCore 엔진 브라우저가 JavaScrip..
2025.04.03