Note

useEffect Hook의 useEffect는 클래스형 컴포넌트의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. useEffect는 기본적으로 매 렌더링 이후에 실행됩니다. 기본 예시는 다음과 같습니다. useEffect 예시 import React, {useState, useEffect} from "react"; const HookUseEffect = (props) => { const [description, setDescription] = useState(''); useEffect(() => { // do effects setDescription('This is useEffe..

useState Hook에서는 컴포넌트 안에서 상태를 관리할 수 있도록 하기 위해 useState 라는 API를 제공합니다. useState는 상태 값과 상태를 업데이트할 수 있는 함수 쌍을 반환합니다. 예시 코드는 다음과 같습니다. useState 예시 import React, {useState} from "react" const HookUseState = (props) => { // count 라는 상태를 만들고, 0을 초기값으로 사용합니다. const [count, setCount] = useState(0); const handleButtonClick = () => { // 카운트 값을 1 증가하여 상태를 업데이트합니다. setCount(count + 1) }; return ( 클릭 수: {coun..

소개 React의 Hook은 클래스형 컴포넌트에서의 복잡성(this의 scope)과 라이프사이클 메소드의 복잡성 등 클래스형 컴포넌트의 여러 문제점을 보완하기 위해 나왔습니다. React 공식문서에 따르면 Hook은 다음과 같은 특징을 가지고 있습니다. 기존의 코드를 다시 작성할 필요 없이 일부 컴포넌트 안에서 Hook을 사용할 수 있습니다. 호환성을 깨뜨리는 변화가 없습니다. 기존의 React 컨셉을 대체하지 않고 좀 더 직관적인 API를 제공합니다. 공식문서에 따르면 React에서 클래스형 컴포넌트를 제거할 계획이 없고 계속 지원할 예정이니 Hook이 당장 필요하지 않다면 Hook을 사용할 필요는 없다고 합니다. 또한, 기존의 코드를 Hook을 사용해서 리팩토링하는 것 보다는 Hook이 필요하다면 점..

수원 연무동에 있는 오적어에 다녀왔습니다. 연무동은 제가 다녔던 대학교 앞의 동네인데 오적어는 학교다닐때부터 자주 다녔던 식당입니다. 오랫만에 친구들과 연무동에서 만나서 자주 갔던 오적어에 다시 갔는데요 여전히 맛있더라구요. 항상 시켜먹던 메뉴인 오삼철반볶음을 시키고 다 먹은 후에 밥을 볶아먹었습니다. 사장님도 여전히 재미있으시고 여전히 변함없이 맛있어서 정말 맛있고 즐겁게 놀다 왔습니다.

2019년 연말 마지막 날 성남아트센터 오페라하우스에서 진행한 벤 콘서트에 다녀왔습니다. 집 근처에서 연말 마지막날에 하길래 평소에 궁금하기도 하고, 벤의 노래를 좋아하기도해서 예매를 해서 다녀왔습니다. 옆동네이지만 성남아트센터에는 처음 가봐서 가서 어디인지 한동한 헤메다가 다른 사람들이 가는 방향으로 따라가니 오페라하우스가 나오더라구요(너무 구석에 있어서..ㅠㅠ) 들어가보니 사진을 찍을 수 있게 포토라인(?) 이 있더라구요. 저는 혼자가서 그냥 사람 비었을때 얼른 한장 찰칵! 연말 마지막날이라 커플들이 많고 저는 혼자간거라 살짝 주위 눈치를 보며 설마 남자혼자온 사람은 나밖에 없나? 생각했는데, 생각보다 혼자 콘서트를 보러 가시는 분들도 많더라구요! 나름 일찍 한 편이였는지 앞자리로 예매를 했었는데요,..

야탑에 있는 신미낙지에 다녀왔습니다. 평소에 매운 음식을 좋아하지만 먹을 일이 별로 없었는데, 매운음식을 좋아하는 친구와 함께 매운 낙지찜을 먹으러 갔습니다. 이전에도 몇 번 방문을 했었는데, 손님이 많을 때는 많은데 적을 때는 적더군요. 이번에는 주말 대낮에 방문을 했는데 손님이 별로 없었습니다! 낙지찜을 맵게 해달라고 주문을 하고 매운 맛이 부족해서 좀만 더 맵게! 해달라고 해서 오랫만에 매운맛을 제대로 즐겼습니다. 여기는 캡사이신으로 매운맛을 내는게 아니라 매운고추로 매운맛을 내서 깔끔하고 맛있는 매운맛이에요! 낙지도 아주 탱글탱글하니 맛있게 먹고 왔습니다!

판교 H스퀘어 N동 1층에 있는 쌀국수집 마마스포에 다녀왔습니다. 고수때문에 쌀국수를 먹지 않았었는데, 요즘에는 고수를 빼고 주는 쌀국수집이 많아져서 부담없이 쌀국수를 먹을 수 있어서 좋더군요 여기도 고수를 빼고 주는데, 고수를 좋아하시는 분들은 고수를 달라고 말하면 따로 담아서 주시더라구요 면도 맛있고 국물도 개운해서 아주 먹기 좋았습니다.

1. 개요 리액트에서는 DOM을 제어할 수 있는 ref라는 것을 제공합니다. ref는 DOM을 제어하는 것으로 반드시 DOM을 직접적으로 제어를 해야할 때만 사용할 것을 권장하고 있습니다. 예를 들면 특정 이벤트가 발생했을 때 스크롤을 특정 위치로 옮겨야할 때 ref를 사용합니다. 또는, 리액트용으로 개발되지 않은 라이브러리를 사용해야할 때 ref를 사용하게 됩니다. 2. 사용방법 ref를 사용하는 방법은 두가지가 있습니다. 첫 번째는 콜백 함수를 이용해서 ref를 등록하는 것입니다. import React from "react"; class RefSample extends React.Component { render() { return ( {this.ref = ref}}>ref div ); } } 두 ..