메소드 https://peter-coding.tistory.com/102 [JS] 메소드(String, Math, Array, Object) String 메소드 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.. peter-coding.tistory.com 생성자 함수 https://peter-coding.tistory.com/100 [JS] 생성자 함수(Prototype), Class 상속 생성자 함수(Prototype) - JS는 프로토타입 기반의 언어임. 프..
안녕하세요, 피터팬입니다! 오늘은 JS의 Computed property에 대해 배워볼건데요. computed property를 직역하면 계산된 프로퍼티입니다. computed property는 객체의 key값을 표현식(변수, 함수 등)을 통해 지정하는 문법입니다. 사용법 let a = "apple"; let b = { [a] : 12345; } 예시 const appleId = "1534"; const carrotId = "3534"; const fruitList = { [appleId]: "Good", [carrotId]: "Bad" }; console.log(fruitList[appleId]); Reference
안녕하세요, 피터팬입니다! 오늘은 Object Methods에 대해 배워볼건데요. Object Methods에는 아래 링크처럼 매우 많지만, 그 중에서 자주 쓰이는 것들만 선정해서 배울 것입니다. 1. Object.assign() 사용법 Object.assign()은 깊은 복사를 할 때 사용을 합니다. 아래처럼 복사를 할 경우, user2의 name값을 바꾸려고 의도했지만, user의 name값도 바뀌게 되는 문제가 발생하게 됩니다. 아래와 같은 복사를 포인터값(주소값)만을 복사하는 얕은 복사라고 합니다. let user = { name:'guesung', age:23, } let user2 = user; user2['name']='sunggue' Object.assign은 아래와 같이 사용합니다. le..
안녕하세요, 피터팬입니다! 오늘은 useContext를 이용하여 전역 props를 전달할 건데요 https://peter-coding.tistory.com/218 [React] useContext를 이용해 전역 props전달하기 기존 컴포넌트 간에 데이터를 전달하려면 props를 이용해야 합니다. A>B>C 각각 부모자식관계일 때, A->C로 데이터를 props로 전달하려면 A>B, B>C로 전달해야하는 불편함이 있습니다. 이를 해결하게 위 peter-coding.tistory.com 위에서는 App.js에 data를 만들어, data를 App에서 전달하였습니다. 이번에는 index.js에서 App Component를 AuthContextProvider로 둘러싸, App.js에서는 오로지 App내용만 담..
안녕하세요, 피터팬입니다! 오늘은 useEffect에 대해 알아볼건데요. useEffect는 side effect(컴포넌트 안에 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업)를 수행할 수 있게 해줍니다. 적용법 import { useEffect } from "react"; 사전 지식 Component의 LifeCycle ; Mount -> Update(Rerendering) -> Unmount 사용법 값이 변경되면 callback function 실행 useEffect(()=>{ callback function }, [ 값 ]); 상황에 따른 사용법입니다. 1. mount되면 실행 ; x useEffect(() => { console.log("Mount!") }) 2. count값이 변경되..
안녕하세요, 피터팬입니다! 오늘은 Reducer에 대해 알아볼 건데요 useRedcuer는, State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook입니다. useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 적용법 import { useReducer } from "react"; 사용법 1. reducer 선언 const reducer = (state,action){ switch(action.type){ case "INCREMENT": return (~) default: return (~) } } state ; reducer가 불리는 시점의 data action ; 업데이트를 위한 정보를 가짐(type,value 등) 2..
안녕하세요, 피터팬입니다! 오늘은 useRef로 input 상태를 관리해볼 건데요. https://peter-coding.tistory.com/204?category=1287898 [React] useState로 input 상태 관리하기 이번에 해볼 것은 input요소에서 사용자가 입력한/선택한 값을 제어해볼 건데요! let으로 선언한 변수는 JS내에서 변경은 가능하지만, 값이 변경되었다고 다시 렌더링 하지 않습니다. useState로 선 peter-coding.tistory.com 지금까지는 위에서처럼 useState를 이용하여 input 상태를 관리해왔습니다. useRef를 이용하면 더 간편하게 input상태를 관리할 수 있습니다. 적용법 import {useRef} from 'react' 사용법 i..
안녕하세요, 피터팬입니다! 오늘은 Createportal을 이용하여 특정 요소에 하위 요소를 추가해보겠습니다. Createportal은 DOM 계층 구조 바깥에 있는 DOM 노드(APP.js보다 상위요소)로 자식을 렌더링할 때 사용합니다. 적용법 react-dom으로부터 ReactDOM을 import해줍니다. (react아닙니다) import ReactDOM from "react-dom"; 사용법 ReactDOM.createPortal(요소,위치) 예시 # public>index.html # App.js React.CreatePortal( , document.querySelector('#backdrop-root') ) => 아래 그림처럼 #backdrop-root 아래에 Backdrop Component..
