DAN'S 기술블로그

✨ 타입스크립트 소개 타입스크립트는 자바스크립트에 타입을 추가한 상위 호환 언어다. 자바스크립트에서는 string, number, object, undefined 같은 원시 타입을 가지고 있지만 약한 타입 언어이기 때문에, 타입으로 인한 에러를 사전에 알기 어렵다. 하지만 타입스크립트로 작성한다면 컴파일 시점에서 타입 에러를 잡아낼 수 있다. 또한 타입스크립트를 사용하면 IDE의 도움을 받을 수 있다. (예를 들어 인자에 무엇을 넣어야 하는지 미리보기가 가능하다) 👩‍🔧 타입 시스템 💡 타입 추론 (Types by Inference) let helloWorld = "Hello World"; 위처럼 변수를 생성하며 값을 할당하는 경우, 타입스크립트는 자바스크립트를 이해하기 때문에 타입을 명시하지 않아도 h..

1. 타입스크립트와 객체지향 타입스크립트는 자바스크립트에 타입이 더해진 언어로, 자바스크립트의 superset이다. 타입스크립트는 자바스크립트로 컴파일된다. 객체지향이란, 객체 위주로 설계하고 프로그래밍하는 패러다임이다. 객체지향에서의 객체는 현실에 있는 것을 추상화한 것이라고 볼 수 있다. (추상이란? 사물이 지니고 있는 여러 측면 중 특정한 부분만 보는 것을 말한다. 지구본이나 지도는 실제의 지구를 추상화한 결과물이다.) 객체지향에서 각각의 객체는 서로 의사소통할 수 있다. 1-1. 절차지향과의 차이점 🧶 절차지향 데이터와 함수 위주로 구성되어있다. 그러나 그러한 함수와 데이터가 엉켜있어 사이드 이펙트 발생확률이 높아진다. 즉, 유지와 확장이 어렵다. 🎁 객체지향 프로그램을 객체로 정의하여 객체들끼리..

❓ 리덕스는 무엇인가 리덕스는 상태관리 라이브러리다. 상태관리 로직을 분리시켜서 효율적으로 관리할 수도 있고, 전역 값 관리도 손쉽게 할 수 있다. 하지만 모든 경우에 리덕스를 사용할 필요는 없다. 관리해야 할 전역 값이 별로 없다면 (state가 많이 변경되지 않는다면) ContextAPI를 써도 좋다. (https://actually-i-am.tistory.com/56) 프로젝트의 규모가 크거나 (관리해야 할 전역값이 자주 변경되거나), 비동기 작업이 자주 필요하다면 리덕스 사용을 고려해보자. 👍 리액트에서 리덕스로 상태관리 하는 장점 미들웨어 비동기 작업을 더욱 체계적으로 관리 가능 유용한 함수와, Hooks를 지원받을 수 있다. ContextAPI는 직접 만들어서 썼다 리덕스 툴킷같은거 ex. c..

🙄 왜 사용하나요? props drilling을 방지하기 위함이다. Props drilling이란? 부모로 해당 props를 사용할 자식 컴포넌트로 전달하면서, 그 중간에서 props를 사용하지 않음에도 불구하고 props를 전달하는 것을 말한다. 그림으로 그리면 위와 같다. 중간 컴포넌트는 props를 사용하지 않으면서도 props를 전달하기 위해서 props가 거쳐가야 한다는 문제점이 있다. props가 무엇이냐면 : https://actually-i-am.tistory.com/47 리액트의 기초 - props 이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇..

useReducer란? useReducer는 상태관리를 도와주는 리액트 훅이다. useState와 다른 점 기능이 더 많고 복잡한 상태일 때 유용하다. state의 조각들이 여러개 함께 사용될 때 적합하다. 위와 같은 장점이 있지만 기능이 강력하다고 항상 좋지는 않다. 왜냐하면 useState에 비해 코드가 무거워지기 때문이다. 사용법 const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn) state : 현재 상태의 스냅샷 dispatchFn : 상태를 업데이트 해주는 함수 상태값을 설정하는 대신, 하나의 액션을 dispatch하게 된다. ** (dispatch - 보내다) 그리고 보내진 것은 reducerFn에서 사용된다 redu..

useEffect 훅을 사용하면 컴포넌트가 마운트, 언마운트, 업데이트 시 할 작업을 설정할 수 있다. (마운드, 언마운트는 각각 컴포넌트가 나타나고 사라지는 것을 말한다.) 이를 이용해 애플리케이션 내에서 벌어지는 사이트 이펙트 (리액트의 관심사가 아닌 것)를 제어할 수 있게 된다. useEffect가 필요한 이유 예를들어 페이지에 접속했을 때, get요청으로 데이터를 받아와 화면에 보여주는 컴포넌트가 있다고 해보자. 이런 기능은 get요청을 받은 다음에 화면에 뿌려줘야 하기 때문에 데이터를 state로 처리한다. 그런데 useEffect가 없다면 state가 변경될 때마다 계속 다시 컴포넌트 함수가 실행될 것이다. 컴포넌트 함수가 실행되면 다시 get요청을 하고, 다시 받아온 데이터로 state변경이..

React에서 form 양식을 입력받는 방법 중 하나로 useRef를 사용할 수 있다. useRef를 통해서 DOM을 선택하고, 해당 DOM의 value를 받아노는 방법이다 사용법은 아래와 같다. React의 기능 중 하나인 useRef를 불러오고 객체를 생성하여 변수에 담는다. 생성한 객체를 원하는 태그의 속성 ref의 값으로 넣는다. 변수명.current 로 해당 DOM을 불러올 수 있다. 주의사항으로 이렇게 불러온 DOM을 직접 조작하면 안 된다는 것이다. 리액트에서 화면에 출력되는 것을 바꾸고 싶다면 state를 변경해야 한다.

https://actually-i-am.tistory.com/47 리액트의 기초 - props 이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그 actually-i-am.tistory.com props는 컴포넌트를 쓰면서 특정값을 전달해주고 싶을 때 사용한다. 그리고 그 특정값으로 JSX를 넘길 수도 있다. 특별한 props인 children을 사용하면 가능하다. 템플릿을 재사용하고 싶을 때 활용할 수 있다. 사용 예시는 아래와 같다. function App() { return ( ); } import React from 'r..

배열을 렌더링 하는 방법은 배열 안에 JSX코드를 넣는 것이다. map메서드 등을 사용하면 쉽게 만들 수 있다. 하지만 이런식으로 렌더링을 효과적으로 하기 위해서는 key라는 고유 속성값을 넣어줄 필요가 있다. import React from 'react'; function UserList(){ const users = [ { id : 1, username : '이름1', email: '1112xxx@xxxx.xxx' }, { id : 2, username : '이름2', email: '2223xxx@xxxx.xxx' }, { id : 3, username : '이름3', email: '33343xxx@xxxx.xxx' }, ]; return ( { users.map( user => () // key값으..

리액트 컴포넌트를 스타일링 하는 방법은 sass, css module, styled components 등의 방법이 있다. 그중 CSS 모듈은 기존 css파일이 특정 컴포넌트로 범위가 지정되도록 만든 것이다. css 모듈을 사용하면 class 이름이 중복되는 것을 방지할 수 있다. 사용 방법은 파일 확장자를 파일명.module.css로 만들어서 사용하면 된다. 이것이 브라우저에서 나타날때 코드가 변환되어서 컴포너트에 종속되도록 만들어 준다. 코드 예시는 아래와 같다. import REact from "react"; import styles from "./파일명.module.css" function Box(){ return {styles.Box} ; } export default Box; 레거시 프로젝트에..