# reactjs
TIL 54 | 객체 계산된 속성명
카카오 프렌즈샵 클론 코딩 프로젝트를 진행하고 있다. 메인의 전체 제품보기 탭에서 두가지 방법으로 Sorting 하는 모달창을 작업하는 중 배운 "객체 계산된 속성명으로 중복된 함수를 축약한 방법"을 기록한다.
ElectronJS 제대로 시작하기
취업하고 4개월 안에 회사에서 제 실력을 검증하기위해 개인 공부를 잠시 미뤄뒀었는데 이제 어느정도(?) 개발 퍼포먼스도 인정받았으니 다시 개인 공부를 시작해봐야겠네요. 추후에 회사에도 Javascript, ReacJS도 전파할 예정입니다. ㅎㅎ 회사에서 주로 WPF,
React JS - 1일차
node jsnpmnpm -> npm install npx -g 를 통해 설치visual studio codegit -> git remote add origin my-github-repository urlcreate-react-app\-> 리액트 작업 환경 구축\->
[React에서 TypeScript사용하기] #5 Redux 프로처럼 사용하기
액션을 선언할 때 보통은 아래 코드와 같이 쓰죠. 따로 타입추론으로 인해서 각 액션의 타입으로 string이 부여되죠. 그런데 타입스크립트에서는 문자열 자체를 타입으로 만들어 줄 수 있습니다. 바로 const assertion을 통해서 말이죠.const assertio
[React에서 TypeScript사용하기] #4 Context API
velopert님의 벨로그 포스트를 보면서 이번 장에서는 타입스크립로 리액트의 Context API를 활용하는 방법에 대해서 알아보겠습니다. 프로젝트의 Hello, World!라고 할 수 있는 투두리스트를 만들어보면서 배워보죠.먼저, 타입스크립트가 적용된 리액트 프로젝
[React에서 TypeScript사용하기] #3 리액트 Hooks 사용하기
이번 시간에는 타입스크립트 환경에서 리액트 Hooks를 사용하는 방법에 대해서 알아보겠습니다.컴포넌트의 Hello, World라고 할 수 있는 카운터를 만들어보죠. src/CounteruseState()를 사용할 때 제네릭으로 타입 인수를 넘겨 state의 타입을 명시
[React에서 TypeScript사용하기] #2 리액트 컴포넌트 + TypeScript
CRA으로 타입스크립트 설정되어있는 리액트 프로젝트를 만들때 다음과 같이 명령어를 입력하면 됩니다. 쉽죠?프로젝트를 열어서 src 디렉토리에 App.tsx 파일을 봅시다. 자바스크립트 환경에서의 리액트 프로젝트와는 다르게 .tsx 확장자를 사용하죠? 타입스크립트를 사용
[React에서 TypeScript사용하기] #1 tsconfig.json
먼저 타입스크립트를 global로 설치합시다.그런 다음 다음 명령어를 입력하면 tsconfig.json 파일이 자동 생성됩니다.tsconfig.json 파일에서는 타입스크립트가 컴파일 될 때 필요한 옵션을 정합니다. 명령어를 알아봅시다.target : 컴파일된 코드가
📜 reactjs 공식 문서 읽기 - Main Concepts 1~4
지속적으로 참고하고 싶은 리액트의 철학적인 내용을 정리하는 것이 목표가장 간단한 React 예제 선천적으로 렌더링 로직은 다른 여러 로직들과 연결이 되어있다. (이벤트 관리, 시간에 따른 state 변화, 데이터 준비 상황 등) React는 이 사실을 포용하는 의미에서
Immer
React 컴포넌트의 state를 변경해야 할 땐, 무조건 불변성을 유지해야한다.업데이트 하는 과정에서 기존의 객체의 값을 직접 수정하면 안된다.객체 구조가 깊어질수록 불변성을 유지하면서 수정하기가 어렵다.immer는 불변성을 유지해주는 라이브러리입니다. produce
Redux #2
기존 방식으로 Redux를 사용하는 경우 mapStateToProps를 이용해서 props내 state를 정의하고, connect를 이용해서 props를 바인딩하는 복잡한 행동을 해야한다.하지만 react-redux의 useSelector와 useDispatch라는 h
Redux #1
상위 컴포넌트로부터 하위 컴포넌트까지의 상태값의 효율적인 전달을 위해서 Context Api를 사용한다. 하지만 앱의 규모가 커지면 커질수록 컴포넌트의 개수와 데이터 개수가 늘어남에 따라 코드도 복잡해지고 길어진다. 이를 해결하기 위해 상태값을 중앙화 시켜 유지관리하기
Context API
주로 어플리케이션에서 전역적으로 데이터가 사용되야 할 때 사용한다. 여러 컴포넌트를 거쳐서 값을 전달하는 것이 아니라 Context를 통해서 원하는 값이나 함수를 전달할 수 있따.Context는 createContext 함수를 사용해서 만들며, 함수를 호출하면 Prov
Hook #3
컴포넌트를 작성하다 DOM을 직접 다루어야 하는 경우나 렌더링 이후 업데이트 된 상태를 바로 조회해야할 경우 useRef를 사용한다.이 변수를 사용하여 다음과 같은 값을 관리한다.setTimeout, setInterval을 통해서 만들어진 id외부 라이브러리를 사용하여
Hook #2
자바스크립트의 6가지 타입 중 객체를 제외한 원시 값들은 참조 값이 아닌 값 자체를 새로 할당한다. 따라서 값이 변경되면 서로 다른 값을 가지게 된다.반면 참조 타입인 객체는 하나의 값이 변경되면 다란 하나의 값도 동일하게 변경된다. 또한, 참조 타입은 동일 참조 값이
Render Props
컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지 않다.컴포넌트 안에서 사용된 행위를 다른 컴포넌트에서 재사용하려면 render prop