Note

1. 개요 리액트에서 클래스형 컴포넌트를 사용하면 라이프사이클 메소드를 사용할 수 있습니다. (함수형 컴포넌트에서는 사용할 수 없습니다.) 라이프사이클 메소드는 컴포넌트가 mount 되거나 update, unmount 될 때 실행됩니다. mount와 unmount는 이름으로 컴포넌트가 등록되거나 해제될 때라는 느낌이 오는데 update는 어떤 경우일까요? 리액트에서 update가 발생하는 경우는 아래와 같습니다. props 값이 변경될 때 state 값이 변경될 때 부모 컴포넌트가 리렌더링될 때 forceUpdate로 강제 업데이트를 트리거할 때 2. Mounting 리액트 컴포넌트는 마운트될 때 위와 같은 순서의 메소드를 실행하게 됩니다. componentWillMount라는 메소드도 있지만 depre..

1. 개요 리엑트에서는 dom요소에 이벤트를 등록하고 핸들링 할 수 있습니다. 이벤트를 등록하는 방법은 아래와 같습니다. 이벤트 등록은 기본 DOM 요소에만 등록할 수 있습니다. 직접 등록한 컴퍼넌트에는 이벤트 등록이 아니라 props에 함수를 전달하는 것입니다. 이벤트 이름은 CamelCase로 등록해야 합니다. 이벤트의 종류는 정말 많아서 따로 정리하지 않고, 자세한 링크만 등록하도록 하겠습니다. https://reactjs.org/docs/events.html

1. 개요 state는 컴포넌트의 내부에서 컴포넌트의 상태를 저장하는 값입니다. props는 부모에서 전달해서 읽기전용으로 사용하는 변수라면 state는 컴포넌트 내부에서 읽기 뿐만 아니라 수정을 할 수 있습니다. 2. 초기화 컴포넌트에서 state를 초기화 하는 방법은 2가지가 있습니다. 첫 번째는 필드(?)에서 선언하는 방법이고, 두 번째는 생성자(constructor)에서 선언하는 방법입니다. import React from "react"; class StateCheckClassComponent extends React.Component { state = { checked: false }; render() { return ( checkbox ) } } export default StateCheckC..

서현에 있는 조개구이 무한리필집인 조개천국에 다녀왔습니다. 전에 다니던 회사 옆건물에 있었는데 지나다니면서 한 번도 못봤는데 언젠가 새로 생겼나 보더라구요! 조개구이 뿐만 아니라 다른 먹거리들도 많이 있어서 조개구이를 못먹는 사람이 있더라도 함께갈 수 있겠더군요 금요일 저녁 8시쯤에 갔는데 근처에 조개구이를 하는 곳이 많이 없어서 그런지 가자마자 웨이팅이...! 조금 기다렸다 자리가 나서 조개를 구워먹기 시작했습니다. 저희가 자리에 앉고도 계속해서 웨이팅이 있더라구요. 처음 조개를 올린 사진입니다. 요건 삼겹살, 항정살, 순대 두번째 조개 세번째 리필 이번에는 은박지에 싸여있는 굴도..! 새우와 닭꼬치 이 외에도 사이드 메뉴들이 많이 있었는데 저희는 이렇게만 먹고 나왔답니다. 가격은 성인 1인당 25,5..

회사에서 회식으로 근처 유스페이스 건물에 있는 볼링장에 다녀왔습니다. 볼링장은 이번까지해서 5~6번정도 갔는데 아직 점수가 잘 나오지 않아요 ㅠㅠ 사진은 찍지 못했는데, 고릴라볼링장은 음식과 맥주, 음료를 시켜서 먹을 수 있습니다. (음식이 맛있지는 않아요...) 연말이라 그런지 내부도 연말분위기를 엄청! 내고 있더라구요 저희는 7시 조금 넘어서 갔는데 앞에 손님들이 많아서 1시간 넘게 기다렸다가 겨우 쳤습니다. 2게임 쳤는데 제 점수는... 63점과 99점이 나왔습니다. 다음번엔 꼭 100점을 넘기를...

1. 개요 React의 Props는 Properties를 줄인 용어로 컴포넌트의 속성을 의미합니다. props는 부모 컴포넌트에서 자식 컴포넌트를 선언할 때 지정하고, 자식컴포넌트에서는 props 변수를 사용할 수 있습니다. 부모컴포넌트에서는 자식컴포넌트를 명시할 때 속성을 지정할 수 있는데 이는 값이 될 수도 있고 함수가 될 수도 있습니다. 또한 자식컴포넌트의 자식을 명시해서 전달할 수 있습니다.(자식 컴포넌트에서 사용하지 않으면 의미가 없습니다.) 자식 컴포넌트에서는 부모에서 prop을 전달하지 않았을 때 사용할 기본 속성값을 지정할 수 있고, PropTypes를 통해 props의 타입이나 필수 속성여부를 지정할 수도 있습니다. props의 이름은 일부 미리 정의된 이름(children)을 제외하고 ..

1. 개요 React는 두 가지의 컴퍼넌트 선언방식이 있습니다. 하나는 함수형 컴퍼넌트고, 다른 하나는 클래스형 컴퍼넌트입니다. 2. 컴퍼넌트 2.1. 함수형 컴퍼넌트 함수형 컴퍼넌트는 아래와 같은 형태를 합니다. import React from "react"; const FunctionalComponent = (props) => { const {description} = props; return Functional Component: {description} }; export default FunctionalComponent; 간단한 형태를 하고, 라이프사이클 기능을 사용하지 않아도 될 때 사용하기 좋습니다. Hooks이 생기면서 함수형 컴퍼넌트에서도 state를 사용할 수 있도록 되었습니다. 2.2...

1. 설치하기 설치하는 것은 간단한 편입니다. 우선 노드와 npm을 설치합니다. 여러 버전을 사용해야 한다면 NVM(NVM Install)을 통해 노드를 설치하도록 합니다. 노드 설치했다면 yarn을 설치합니다. $ npm instll -g yarn 이제 yarn을 통해 react app을 생성하도록 합니다. $ yarn create react-app react-practice react app이 생성되었으면 해당 디렉토리에서 필요한 라이브러리를 설치합니다. $ cd react-practice $ yarn add node-sass 이제 준비는 완료되었습니다. 아래 커맨드로 앱을 실행시키고 브라우저를 통해 http://localhost:3000 으로 접속하면 생성된 리액트 앱을 볼 수 있습니다. $ yar..