리액트는 props를 통해 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달한다. 리액트 어플리케이션을 개발하다보면 여러 겹의 컴포넌트를 거쳐 데이터를 전달하는 일이 빈번하게 생긴다. Props Drilling 간단한 예시를 만들어 봤다. import { useState } from "react"; import "./App.css"; function App() { const [cnt, setCnt] = useState(0); return ( setCnt(cnt + 1)} > +1 ); } function RedBox() { return ( ); } function GreenBox() { return ( ); } function YellowBox() { return ; } export default App;..

드디어 실전 리액트 프로그래밍을 완독했다. 5월 5일에 막 공부를 시작할 때 세웠던 5월 안에 끝내겠다는 목표보다는 좀 늦은 감이 없지 않지만, 어찌어찌 개강 전까지 끝낸거에 만족스럽다. 여태껏 웹개발 공부는 프로젝트를 진행하면서 필요할 때 필요한 것만 해왔지, 이렇게 각잡고 공부한 것은 처음이다. 두 공부법 모두 각자의 장단점이 있어서 상황마다 목적에 맞는 공부법을 선택하면 좋을 것 같다. 이번에 실전 리액트 프로그래밍을 통해 공부한 것은 만족스러웠다. 웹개발하면서 쌓여있던 많은 궁금증이 풀렸고, 개발하면서 갖고 있던 부채감, 막막함이 많이 해소되었다. 앞으로 목표도 뚜렷해졌다. 이제 열심히 할 일만 남았다!

동적 타입 언어 정적 타입 언어 변수에는 여러가지 타입이 있다. 언어마다 조금씩 상이하긴 하지만 숫자, 문자열, 배열 등이 있다. 이 변수의 타입이 런타임에 결정되는 언어가 있고, 컴파일 타임에 결정되는 언어가 있다. 전자를 동적 타입 언어라 하고 후자를 정적 타입 언어라 한다. 자바스크립트는 동적 타입 언어다. 동적 타입 언어이기 때문에 숫자로 초기화한 변수에 문자열을 할당해도 문제가 없다. 동적 타입 언어는 코드의 양이 적을 때는 생산성이 높지만, 코드가 복잡해지면 런타임 시 예상치 못한 오류가 발생할 가능성이 높아지고 그 에러를 찾기도 힘들어진다. 그래서 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 타입스크립크(TypeScript)가 등장했다. 타입스크립트의 여러 타입들 타입스크립트에..

8장은 리액트 기반 프레임워크 Next.js를 다룬다. next의 가장 큰 특징은 서버사이드 렌더링(SSR)을 지원하는 것이다. 서버사이드 렌더링(SSR)이나 클라이언트사이드 렌더링(CSR)을 모른다면 아래의 유튜브를 추천한다. 드림코딩 - SSR Next.js next.js를 시작해보자. 우선 next와 react를 설치한다. $ npm init -y $ npm install next react react-dom next.js는 프레임워크이고, 프레임워크는 저마다의 규칙이 있다. next.js에서는 모든 페이지 컴포넌트가 pages 폴더 밑에 있어야 한다. pages 폴더를 만들고, page1.js 파일을 만든다. // ./pages/page1.js export default function Page1..

웹팩(Webpack) 웹팩은 모듈 번들러다. 모듈은 자바스크립트 파일 같은 리소스 파일이고, 번들은 여러 모듈로 만들어진 결과 파일이다. 2000년대 초반의 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 이 때는 페이지당 필요한 리소스 파일이 많지 않아서 웹팩과 같은 번들러가 필요하지 않았다. 하지만 single page application이 등장하면서 하나의 HTML 파일이 많은 자바스크립트 파일을 포함했고, 더이상 script 태그로 불러오기에는 무리가 있었다. 파일이 실행되는 순서도 신경써야 하고, 변수를 덮어쓰는 위험도 생겼기 때문이다. 그래서 이런 문제점을 해결해주는 웹팩이 등장했다. webpack-cli webpack-cli는 webpack을 cli에..

바벨과 웹팩은 웹 어플리케이션을 제작할 때 필수적인 기술이다. create-react-app, next.js 등 프로젝트를 구축해주는 라이브러리, 프레임워크는 바벨과 웹팩을 기본적으로 포함한다. 바벨과 웹팩을 자세히 모르더라도 내장된 기본 설정으로 간단한 프로젝트를 제작할 수는 있지만, 프로젝트의 규모가 점점 커지면 바벨과 웹팩을 알아야 할 순간이 찾아온다. 바벨(Babel) 바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다. 하이 레벨의 언어를 로우 레벨 언어로 변환하는 보통의 컴파일러와는 비교된다. 바벨은 JSX, ES6 등 최신 문법을 브라우저에서 이해할 수 있는 코드로 변환시켜준다. 바벨을 이용하면 오래된 브라우저도 최신 자바스크립트 코드를 이해할 수 있게 된다. 먼저 바벨을 실행할 프로젝..

4장은 리액트 활용법을 다루는데, 블로그에 포스팅하기 애매해서 따로 공부했다. 5장은 클래스형 컴포넌트를 다룬다. 클래스형 컴포넌트 자체가 레거시여서 기존 코드를 작업하지 않는 이상 클래스형 컴포넌트를 접할일이 잘 없다. 그래서 나중에 사용할 일이 생기면 그 때 공부하기로 하고 패스했다. 이제 6장. 6장은 리덕스를 다룬다. 리덕스는 리액트를 사용하면서 생기는 많은 불편한 점들을 개선해주는 훌륭한 프레임워크다. 리덕스(Redux) 리덕스는 자바스크립트를 위한 상태 관리 프레임워크다. 리덕스를 사용하는 이유는 다음과 같다. - 컴포넌트 코드와 상태 관리 코드를 분리할 수 있다. - 서버 렌더링 시 데이터 전달이 간편하다. - 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋다. - 깊은 곳에 있는 자식 ..

이번엔 useState, useEffect 외의 다양한 훅을 알아보자. useContext useContext 훅은 Consumer 컴포넌트를 사용하지 않고도 Provider 컴포넌트의 context 데이터를 사용할 수 있게 해준다. 사용한 것과 사용하지 않은 것을 비교해보자. // Provider 컴포넌트 import React, { createContext, useContext } from "react"; const UserContext = createContext(); export default function NoUseContext() { const user = { name: "Jane", age: "25" }; return ( ); } // Consumer 사용 function CunsumerC..

ref 리액트로 개발하다 보면 돔 요소에 직접 접근해야 할 떄가 있다. 이때 ref 속성을 사용하면 자식 요소(컴프넌트, 돔 요소)에 직집 접근 할 수 있다. import React, { useEffect, useRef } from "react"; export default function TestUseRef() { const inputRef = useRef(); useEffect(() => { console.log(inputRef); inputRef.current.focus(); }, []); return ( save ); } useRef 훅이 반환하는 ref 객체를 이용하면 자식 요소에 접근할 수 있다. 접근하고자 하는 요소의 ref 속성에 ref 객체를 넣으면 된다. props로 ref 전달하기 리..

Context API 리액트로 개발하다 보면 여러 개의 컴포넌트를 중첩시키는 일은 정말 흔하다. 그리고 데이터를 멀리 있는 하위 컴포넌트에게 props로 전달해야 하는 경우도 있다. 이 경우에는 중간 컴포넌트에서 해당 props를 사용하지 않더라도 반복해서 전달해줘야만 한다. 이 때 Context API를 사용하면 이런 번거러운 작업이 필요없다. Context API는 상위 컴포넌트에서 하위에 있는 모든 컴포넌트로 직접 데이터를 전달할 수 있기 때문이다. Context API를 사용하지 않은 것과 사용한 것을 비교해보자. 먼저 사용하지 않은 것이다. import { useState } from "react"; export default function FirstComponent() { const [msg..