codinghatso

useRef 개념 설명 const ref = useRef(value); 함수형 컴포넌트에서 useRef를 부르면 ref object를 반환해줍니다. ref object 란? { current: value } 형식으로 저장이 됩니다. 수정이 가능하기 때문에 언제든 원하는 값으로 바꿔줄 수 있다. 렌더링이 계속되어도 언 마운트 되기 전까지 값을 유지할 수 있다. useRef의 용도 변수 함수형 컴포넌트가 렌더링 된다는 것은 컴포넌트 내부 변수들이 초기화된다는 말입니다. Ref의 값이 변화해도 렌더링이 되는 상황이 일어나지 않고, 렌더링이 일어나도 값이 초기화되지 않기 때문에 사용됩니다. 요소 접근 Ref를 사용하면 쉽게 input요소에 접근할 수 있게 됩니다. (마치 javascript의 Document.q..

useEffect의 두 가지 형태 첫 번째 컴포넌트가 렌더링 될 때마다 실행 useEffect(() => { //작업... }); 두 번째 화면에 첫 렌더링 될 때 실행 배열 인자의 값(value)이 변화할 때마다 실행 useEffect(() => { //작업... },[value]); // [] 두번째 인자가 빈 배열일 때에는 화면에 첫 렌더링 될때 만 실행한다. useEffect의 Clean Up useEffect(() => { const timer = setInterval(() => { console.log('타이머 돌아가는 중...'); }, 1000); return () => { clearInterval(timer); console.log('타이머가 종료되었습니다.'); }; }, []); 한번..

useState는 state와 setState를 배열 형태로 return 해 줍니다. const [state, setState] = useState(초기값); state에는 현재 상태 값이 들어있습니다. setState로 상태 값을 업데이트시켜줄 수 있습니다. setState값이 변경 될 때마다 업데이트(렌더링) 됩니다. State값을 변경할 때 변경할 값이 이전 State값과 연관되어 있다면 콜백함수를 사용하는 게 좋습니다. setState((prevState) => { return newState; }) //배열 형태는 [input, ...prevState] 스프레드 문법으로 새로운 배열을 return 하면 된다. State의 초기값이 어떤 무거운 함수의 결괏값으로 전달될 때 콜백함수로 전달하면 초기..

"javascript에서 this는 함수를 호출한 객체이다" 전역에서 this 호출 시 window객체를 가리킨다. function main(){ console.log(this); } main(); //와 window.main()은 같다. //window객체를 가리킨다. 'use strict'를 사용하면 함수를 호출한 객체를 명시하지 않으면 undefined 값을 반환한다. const object = { name: 'hatso', main: function() { console.log(this); }, }; object.main(); //이렇게 하면 main함수를 호출한 object객체를 this가 가리킨다. //만약 const main2 = object.main; //main2(); //이렇게 호출한다..

문제 정수 N개로 이루어진 수열 A와 정수 X가 주어진다. 이때, A에서 X보다 작은 수를 모두 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 n과 x가 주어진다. 둘째 줄에 수열 A를 이류는 정수 N개가 주어진다. 주어지는 정수는 모두 1보다 크거나 같고, 10,000보다 작거나 같은 정수이다. 출력 x보다 작은 수를 이볅받은 순서대로 공백으로 구분해 출력한다. x보다 작은 수는 적어도 하나 존재한다. 예제 입력 10 5 1 10 4 9 2 3 8 5 7 6 예제 출력 1 4 2 3 정답 코드 #include using namespace std; int n, x, a[10005]; int main(void){ ios::sync_with_stdio(0); cin.tie(0); cin >> n >> x;..

DOM( Document Object Model) EventTarget ↑ Node ↑ ↖ ↖ Document Element Text ↑ HTMLElement ↑ ↖ HTMLInputElement HTMLDivElement 브라우저가 HTML 파일을 읽어 어플리케이션이 이해할 수 있는 오브젝트 형식으로 변환한다. 또 그 모델은 트리형태를 띈다. CSSOM( CSS Object Model) DOM + CSS = CSSOM DOM으로 HTML 파일을 오브젝트로 만든 후 CSS 파일을 오브젝트에 매핑시켜 파일을 적용 시킨다. 이때 사용자 지정 스타일 또는 inline 즉 브라우저가 기본값으로 정의하고 있는 스타일이 적용된다. cascading rules 에 따라 위 작업이 완료가 되면 compute style..

브라우저에서 좌표찾기 getBoundingClientRect() 사용법 Element.getBoundingClientRect(); 예시 const sbox = document.querySelector(".sbox"); document.addEventListener("click", (e) => { const rect = sbox.getBoundingClientRect(); console.log(rect); console.log(`clinet: ${e.clientX}, ${e.clientY}`); console.log(`page: ${e.pageX}, ${e.pageY}`); });

nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a !== undefined) ? a : b; 예시 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? las..