(번역) 리액트를 배우고 계시나요? 간소하게 시작해 보세요.
Learning React? Start Small. (by Dave Ceddia) 를 번역한 글입니다.
리액트에 대해 구글링 하던 중 발견한 글입니다. 저 같이 리액트에 발을 들여놓는 사람들에게 도움이 되는 내용이라 번역해 보았습니다.
저는요, 지금껏 반년동안 리액트를 배우려고 이것저것 시도해 봤어요. 그런데도 제가 그렇게 노력을 해도 튜토리얼 수준을 벗어나지를 못해요. 코드가 직관적이지가 않아요…ㅠㅠ
튜토리얼을 완료하고, 자그마한 희망을 얻어 당신만의 어플리케이션을 만드려 시도하는 순간…! 당신이 확실하게 이해하지 못했다 는 사실을 깨닫게 되고, 앞서 얻은 희망이 산산조각나는 기분. 매우 짜증나는 일입니다.
만약 이게 당신의 이야기라면, 조언을 해드리죠. 간소하게 시작하세요. 정말 간소하게.
작은 실험을 해보세요. (Do Little Experiments)
스스로 어떤 것들을 만들어 보려고 하셨어요? 얼마나 “큰” 것 들이었나요?
저는 리액트로 매우 작은 어플리케이션들을 만들어 보기 전까지 상태(state)와 속성(props)를 심오하게 학습하지 않았습니다. 매우 작은 어플리케이션을 만들어 보는 과정을 저는 “실험”이라 부릅니다.
실험은 무서운게 아니에요. 만들어 보고 멀리 던져버려도 좋아요. 실패해도 잃을게 없어요. 아키텍쳐를 고민할 필요도 없고, 디자인도 필요없고, 앞으로의 전망같은 것도 생각할 필요가 없죠. 오로지 정해져 있는 과정을 따라가면 되고, 망쳤다 하더라도 지우고 다시 시작 할 수 있어요.
작은 실험들은 이런 것들이 있어요.
- “hello world” 렌더링하기.
- 몇개의 중첩된 HTML 요소들을 렌더링하기. (JSX의 느낌을 얻기 위해)
- hello world를
Hello와World두개의 요소로 리팩토링 해보기. 둘을HelloWorld로 합치기. World가 추가적인 “name” 속성을 받도록 하고, 렌더링 하기.const items = [{id: 1, name: "one"}, {id: 2, name: "two"}]같은 정적인 배열 생성하기. “items”을 속성으로 받아items.map(...)으로 아이템의 리스트를 렌더링하는 컴포넌트 생성하기.- 카운터를 만들어 보기. 초기 상태는 count = 0. “+” 버튼과 “-“ 버튼으로 상태를 변경하도록 구현하기.
- 카운터의 상태를 root 컴포넌트에, 증가/감소 버튼을 자식 컴포넌트에 넣고, 증가/감소 함수를 속성으로 밑으로 넘겨 자식들이 부모의 상태를 갱신할 수 있도록 구현해보기.
어떤 건지 알겠죠? 매우 작은 것들이에요. 기초적인 것들. 이런 것들은 “어플리케이션” 이라고 보긴 힘들어요. 하지만 이것들이야말로 튜토리얼을 할때의 좌절감과 학습한 지식이 손가락으로 빠져나가는 상황으로부터 벗어나 당신만의 어플리케이션을 만들 수 있게 해줄것 입니다.
이런 작은 실험들을 같은 폴더에 보관해 더 큰 어플리케이션의 컴포넌트로 사용할 수도 있지만, 저는 실험들을 독립적 형태로 만드는 방식을 좋아합니다. 기본기를 당신의 손가락에 확실하게 익힐 수 있거든요.
몸이 기억하도록 하자. (Muscle Memory)
아무도 이에 관한 이야기를 하지 않아요. 비록 바보같아 보일지는 몰라도 저는 “React app”의 기본 구조를 학습하는 것이 매우 중요하다고 생각합니다. 제가 말하는 건 어플리케이션을 만들기 위한 기본 “boilerplate”1입니다.
import React from 'react';
import ReactDOM from 'react-dom';
const Hello = () => <div>Hello</div>
ReactDOM.render(<Hello/>, document.querySelector('#root'));
물론, create-react-app 에 의지할 수도 있죠. 하지만 당신의 뇌를 속일 수는 없어요. 저 import가 무슨 역할을 하는지, 그리고 저것들이 갑자기 사라진다면 처음부터 어떻게 다시 작성해야 하는지 당신은 알 수가 없을 거에요. 그런 상황을 마주하면 공포에 질릴지도 몰라요.
그러니까 이런 어두운 곳에 빛을 비춰주세요. 담담하게 코드를 익히고 부분마다 어떤 역할을 하는지 학습하세요. 눈을 감고도 작성할 수 있도록 확실하게 익히세요.
create-react-app 을 사용하세요. 다만, src폴더의 내용을 모두 삭제하고 index.js 파일을 자신의 손으로 직접 다시 작성하세요. 이런 방식으로 손에 익을때까지 3-5개의 어플리케이션을 다루어 보세요. 파일을 보고 “이 부분의 코드가 어떤 역할을 하는지 모르기 때문에 건드릴 수 없어.” 라고 생각할때 인지적 과부하가 많다고 생각합니다.
연습, 연습하세요! (Go Practice!)
리액트는 다른 어떤 기술과 마찬가지로 연습이 필요합니다. 어느 누구도 프론트엔드 개발자가 되는 방법을 알고 태어나지 않습니다. 당신의 의미있는 시간을 연습하고, 조그만 실험을 하는데 사용하면 실력이 향상될 것입니다. 그러다보면 어플리케이션을 만드는데 필요한 아이디어들이 머리속에 가득 차있을거에요.
언제나 까다로운 부분을 시도할때는, 별도의 연습을 해보세요 .
Redux 를 배우고 계신가요? 아무것도 망가뜨리지 않고 실행할 수 있는 작은 샌드박스2 앱을 작동시켜 보세요.
React Bootstrap 으로 어떻게 레이아웃을 만드는지 잘 모르시겠다구요? 메인 프로젝트에 이것저것 시도하다가 망치지 마세요. 이건 좋지 않은 방법이에요. 망친 부분을 전부 다시 수정해야할거에요… 대신에 실험용 어플리케이션을 만들어 시도해 보세요.
새로운 기술을 배울때는 별도의 연습을 하도록 하세요!