Today I Learned

React 웹 게임을 만들며 배우는 React(1) 리액트는 불필요한 컨텐츠의 리로드가 없다. 예를 들어 리액트를 사용하지 않은 페이지는 컴포넌트 하나를 클릭하면 전체화면이 다시 로딩된다. 리액트는 필요한 스테이트의 정보만 리로드하기 때문에 결과적으로 동적인 웹페이지를 효율적으로 유지 보수하고 관리할 수 있다. \[참고\]React를 사용하는 이유 Com...

React 웹 게임을 만들며 배우는 React(2) 클래스의 개념이 조금 잡히기 시작하니 클래스를 쓰지 말란다. 아무튼 클래스 사용을 지양하기 위해 나온 것이 React Hooks. 함수 형태로 사용 가능하다. 코드가 훨씬 짧고 간결하다. 클래스 대신 컴포넌트로, state를 객체로 쓰는 대신 하나씩 사용하기. 클래스를 사용하든 Hooks를 사용하든 개인의...

React 웹 게임을 만들며 배우는 React(3) module을 export하는 법 모듈을 불러와 사용하는 문법은 와 두가지가 있다. 두 문법은 서로 치환이 가능하며 아래와 같이 사용된다. 모듈을 exports하면 해당 파일 또한 import가 가능한데, exports되는 게 객체나 배열이면 구조 분해가 가능하다. 엄밀히 따지면 는 노드의 모듈 문...

React 웹 게임을 만들며 배우는 React(4) 불변성 일반적으로 배열에 요소를 추가할 때 를 사용하는데, 리액트에서는 를 사용한 변화를 인지하지 못한다. 리액트는 렌더링 여부를 참조값이 바뀌었는가를 확인하여 결정하기 때문이다. 따라서 리액트에서 배열에 요소를 추가하기 위해서는 새로운 배열을 만들어 기존 배열을 복사함과 동시에 요소를 추가해야 한다. ...

React 웹 게임을 만들며 배우는 React(5) 리액트 조건문 반복문과 조건문은 기본적으로 렌더 안에서 사용하지 못한다. 조건문의 경우에는 삼항연산자 또는 보호연산자를 이용하면 렌더 안에서도 사용이 가능하다. jsx에서 , , 은 태그 없음을 의미한다. 추가 팁 Hooks에서는 클래스에서의 의 속성들을 로 표현한다. 와 의 차이는 , 등 객체의 ...

React 웹 게임을 만들며 배우는 React(6) 리액트 라이프사이클 첫번째 렌더링이 성공적으로 실행되었다면 함수가 실행된다. 등의 이유로 리렌더링을 할 때에는 실행되지 않는다. 이것과 반대로 는 컴포넌트가 제거되기 직전에 실행되는 함수이다. 는 리렌더링 후에 실행되는 함수이다. 이렇게 첫 컴포넌트의 렌더링 후, 리렌더링 후, 제거 직전에 실행되는 ...

React 웹 게임을 만들며 배우는 React(7) 컴포넌트는 주로 반복문을 기점으로 분리한다. 는 항상 실행되기 때문에 꼭 조건문으로 감싸주는 것이 좋다. 의 인자가 빈 배열이면 와 동일하다. 배열에 요소가 있으면 와 를 둘 다 수행한다. 훅스에서 위와 같이 state에 함수가 들어갈 경우, 를 수행할 때마다 함수도 매번 수행된다. 가 수행 시간이 ...

Javascript 요 며칠간 리액트와 타입스크립트를 공부하면서 아직 자바스크립트 문법에 대한 기초가 부족하다고 생각하여 빠르게 훑었다. 정리하기에는 애매해서 간단하게 기록용으로만! 오늘부터는 다시 리액트랑 타입스크립트를 공부한다. React 웹 게임을 만들며 배우는 React(8) 는 state를 다루는 훅스의 문법이다. 초기 상태의 initial s...

React 웹 게임을 만들며 배우는 React(9) Context API 부모 컴포넌트 아래의 모든 자식 컴포넌트가 데이터를 사용하기 위해서는 매번 데이터를 넘겨주어야 하는데, Context API를 사용하면 한 번에 데이터를 넘길 수 있다. 부모 컴포넌트에서 함수를 사용하여 초기 데이터 값을 생성한다. 그런 뒤, 데이터를 넘겨줄 자식 컴포넌트들을 태...

React 웹 게임을 만들며 배우는 React(10) React Router 지금까지는 리액트 문법에 대해 공부했다면, 이제는 한 페이지 안에서 여러 페이지가 동작하는 것처럼 보이는 리액트 라우터의 사용법을 공부한다. 리액트 라우터를 사용하기 위해서는 기본적인 뼈대 역할을 하는 와 실질적으로 라우터를 생성하는 모듈을 설치해야 한다. 설치한 리액트 라우터...