반업주부의 일상 배움사

함수형 컴포넌트에서 외부의 데이터를 가져와야 할 때가 있죠. useMemo와 useEffect를 쓸 수 있어요. 둘 다 두 번째 파라미터로 외부 데이터의 변경을 관찰할 수 있는데요. 만약 useEffect(함수, []) 이렇게 빈 배열을 넣으면 처음에 딱 한 번만 함수가 실행되고요. useEffect(함수, [props.value])라고 하면 props.value가 변경될 때마다 함수가 실행되요. 함수형 컴포넌트는 생명주기(componentDidMount, componentDidUpdate, ...) 메소드가 없어서 useEffect로 대신 구현하기도 해요. 먼저 useMemo 예제를 보죠. Main 컴포넌트는 1초마다 값을 바꾸는 역할만 해요. import React, { Component, useEf..

글로벌 이벤트라고 생각하면 편해요. 실제는 그렇지 않겠지만 스토어는 리듀서들을 가진 오브젝트고, 실제 데이터는 리듀서에 들어있다고 생각해보세요. store.reducer.data 파일 하나로 끝낼께요. import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; import { createStore, combineReducers } from 'redux'; ///////////////////////////////////////// // // Main // ///////////////////////////////////////// function Main() { const dispatch = useDi..

SCSS 같은거라 보면 돼요. 설치할께요. npm install --save styled-components 상속도 되고 구조화도 가능해요. 종합 예제를 만들어봐요. import styled, { css } from 'styled-components'; const BoxParent = styled.div` padding: 50px; `; const Box = styled(BoxParent)` background-color: ${(props) => props.bgColor}; color: red; // &는 this와 같은 의미 & > div { color: blue; ${(props) => props.bgColor === 'grey' && css` color: yellow; `} } `; function..

리액트로 여러개의 페이지를 구축할 수 있어요. 주소창에 /admin, /user 등을 입력하면 서로 다른 페이지를 보여주는거죠. 그걸 라우팅이라고 불러요. 우선 간단하게 해시를 이용할께요. 주소창에 /#a를 입력하면 A 컴포넌트를 보여주고 /#b를 입력하면 B 컴포넌트를 보여주면 될 것 같네요. import { useState } from 'react'; function A() { return A 페이지; } function B() { return B 페이지; } function App() { const [hash, setHash] = useState(document.location.hash); function onHashChanged() { setHash(document.location.hash); }..

React.createElement()를 많이 쓰면 코드 파악이 어려워요. 그래서 HTML과 유사한 방식으로 컴포넌트들을 생성할 수 있도록 JSX가 나왔어요. create-react-app으로 프로젝트를 생성해요. npx create-react-app jsxtest src/App.js를 열어보면 div, img, p, a 등 익숙한 태그들이 보이죠? 컴파일 하면 HTML로 변환되지만 현재 상태는 리액트 컴포넌트에요. class 대신 className을 쓰고 for 대신 htmlFor를 쓰는 등의 차이가 있어요. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to relo..

education(교육)은 educe(끌어내다, 추출하다)라는 단어에서 유래되었다. 자녀에게 적용해 보자. 무엇을 끌어낼 것인가. 아이의 지식과 지혜다. 그런데 아이에게 지식과 지혜가 없는데 어떻게 끌어낼 수 있는가. 아이에게 책을 선물해 보자. 그 아이는 책을 읽고 어떤 행동을 하는가. 부모나 친구에게 책 내용을 말한다. 여행을 보내보자. 여행지에서 본 것, 느낀 것을 말한다. 안에 있는 것들이 밖으로 나온다. 밖의 것들이 안으로 들어가서 다시 나온다. 지식은 순환이다. 나비 효과와 같은 확장형 대순환이다. 그런데 만약 꺼내려는 아이의 생각을 차단하고 내 생각을 주입하면 어떤 일이 벌어질까. 더 이상 꺼내는 것이 두려워진다. 자랑은 나보다 못한 상대에게 하는 것이다. 부모(선생님)의 역할은 아이에게 좋..

index.html 파일 하나로 끝내보죠. react.js와 react-dom.js만 있으면 돼요. 에 이걸 넣어요. ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요. 이번엔 클래스 컴포넌트를 만들어 봐요. 이번엔 함수 컴포넌트를 만들어 봐요. 클래스 컴포넌트의 props에 값을 넘겨봐요. 컴포넌트를 재사용할 수 있어요. 함수 컴포넌트의 props에도 값을 넘겨요. 클래스 컴포넌트는 생성주기에 따라 자동으로 호출되는 메소드가 있어요. 태그를 생성할 때 속성값을 넣을 수 있어요. 태그로 해보죠. 한 번 보여주고 끝나는 페이지는 재미없죠? 클래스 컴포넌트에는 state라는 속성과 setState라는 메소드가 있어서 값이 변할 때마다 render가 다시 호출되요. 화면을 다시 그린..

가벼운 동화 한 권이라도 함께 읽다 보면 할 이야기가 무궁무진해진다. 욕심쟁이 딸기 아저씨는 표지부터 재밌다. 제목의 폰트는 아저씨의 콧수염을 닮았다. 수묵과 펜을 조합한 그림체는 정겹다. 게다가 글과 그림을 모두 작가 혼자서 쓰고 그렸다니 아이에게 탁월함은 이런 것이다라는걸 보여줄 수 있는 기회이다. 이야기 속으로 들어간다. 아저씨는 왜 딸기를 좋아하게 됐을까. 사람들은 왜 아저씨를 욕심쟁이라고 생각하고, 아저씨는 왜 사람들에게 화를 낼까. 딸기를 집 안 가득히 채우려면 돈이 얼마나 필요할까. 마트는 몇 번을 다녀와야 하지. 배달이 될까. 배달이 된다면 어떤 앱을 썼을까. 상하지 않게 어떻게 보관하지. 딸기밭을 관리하려면 어떻게 해야 할까. 사람들이 공터에 모여서 수박을 먹던데, 원래 마을 사람들은 딸..

교육의 본질은 삶을 즐기고 일을 탁월하게 하며 하나님의 영광을 드러내는 능력을 배양함에 있다. 주변을 둘러보라. 일의 경중에 따라 그 차이가 결정되지 않는다는 것을 알 수 있다. 몸 쓰는 자는 몸 쓰는 것으로, 머리 쓰는 자는 머리 쓰는 것으로, 예배드리는 자는 예배드리는 것으로. 허나, 이 세 가지(영, 혼, 몸)는 별개가 아니요. 하나이되, 그 드러남의 경중이 다를 뿐이다. 교육의 목표는 성과가 아니요. '성과를 통한 재교육'에 있다. 성과는 있되 재교육 하지 않으면 더 탁월한 성과는 없을 것이요. 인류는 더 이상 나아가지 못한다. 다행인 것은 인간의 본성에 심겨진 배움과 가르침의 정신은 성과를 통한 재교육을 가능케 했고 미래에도 이어질 것이다. 따라서, 교육의 목표는 항상 '성과를 통한 재교육'이어..

'주엘리아'의 엘! 유엘이의 꿈은 발레리나에요. ‘다양한 방문 클래스가 모여있는 플랫폼' 아이고고에서 현대무용을 배워볼 수 있는 기회가 생겼어요. 인기 많은 나디아 튜터님 수업이에요. 집을 깨끗하게 치우고 선생님을 기다렸답니다. 선생님의 아이스 브레이크 시간. 얼굴에 붙은 포스트잇 떨어뜨리기(얼굴 근육 이용)로 아이의 긴장을 풀어주셨어요. 스트레칭 시간. 유엘이가 상당히 유연하다며 칭찬해주셨어요. 무용 수업 시간. 현대무용의 매력에 푹 빠지는 시간이었어요. 나디아 튜터님이 설명도 잘 해주시고 친절하셔서 동작을 빠르게 익힐 수 있었어요. 수업을 마치면 리포트도 해주세요. 유엘이가 너무 좋아해서 제가 다 뿌듯했답니다. (-: