typescript16 React(93) TypeScript - 유사객체배열에서 원하는 값 사용하기 유사 객체 배열은 {객체 안에 {객체} 들이 배열} 처럼 들어있는 객체 형식을 말한다. 배열과 유사객체배열의 차이는 Array 와 Object 의 차이와 같다. 배열은 순서가 있으며, index 로 요소를 찾는다. 유사객체배열은 순서가 없으며, key 로 요소를 찾는다. 순서가 있고 없고의 차이는 크다. 배열은 메모리에서 연속된 공간을 할당 받는다. 그래서 맨 앞에 요소를 추가한다면 배열의 요소들은 순서대로 한 칸씩 옆으로 옮겨야만 한다. 객체는 메모리에 할당될 때 객체의 값에 참조 값을 통해 접근한다. 그렇기 때문에 순서를 가진 것 같이 나열해놔도 각자 주소가 다르다. 그래서 동적으로 생성되는 데이터의 경우 배열보다는 객체 형식으로 표현하는게 성능 상 더 좋다. 자 그럼 유사객체배열에서 원하는 값을 핸.. 2023. 2. 16. React(83) TypeScript - Record 란 Record 는 React v2.1 부터 도입된 유틸리티 타입이다. 요 녀석은 객체전용 타입이다. Record 는 요렇게 두 개의 제네릭 타입을 받을 수 있다. 첫번째 제네릭 타입 K 는 key 의 타입이고, 두번째 제네릭 타입 T 는 value 값의 타입을 의미한다 type studentNames = Record; ↑ ↑ 객체에서 키의 타입 값의 타입 쉽게 말해서 나는 객체 안의 값들을 전부 string 으로 사용하고 싶다. Record 가 없었을 때는, 객체 프로퍼티 타입을 하나하나~~~~ string 이라고 적어줘야 했다. type studentNames = { name1: string; name2: string; name3: string; name4: string; }; 하지만 Record 를 사.. 2022. 9. 23. React(69) TypeScript - 객체 속 객체의 반복문 사용하기 본 포스팅에서는 객체 반복문 사용법을 알아보고, 반복문에서 객체의 키를 매핑할 때 뜨는 아래의 타입스크립트 에러를 살펴볼 것이다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React(69) TypeScript - 객체 안 객체 반복문 사용하기 array 는 반복문을 많이 써봤는데, 객체를 돌려보는 건 처음이다. 특히 객체 안의 객체는 처음이다. 막상 한번 훓고 지나갔던 문법들이 동창회한 느낌이었다. object.keys() 로 준비하기 객체를 배열렌더링을 위해 막연히 구글링하던 도중, 아주 유용한 녀석을 찾았다. 이녀석은 key 값만 쏙 빼서 배열화 시키는 objec.. 2022. 5. 15. Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 styled-components 로 개발하며 첫 난관은 자식 컴포넌트에 스타일을 적용하는 것이었다. pure css 로는 필요한 div 태그에 클래스를 만들었는데, 이제 이 방식은 통하지 않는다. 부모 컴포넌트에서 자식에만 있는 속성을 변경하고자 한다. 하지만 자식은 공통컴포넌트라 그 안에서 직접적인 수정이 어렵다. 결국 자식을 건들지 않고, 부모 쪽에서 구체적인 속성 값을 줘서 해결해야 하는 것이다. (나의 경우, 간단하게도 자식컴포넌트의 패딩값을 변경하는 거였는데, 이 쉬운 것을 styled-components 초짜가 하려니 한참 뱅뱅 돌았다.) 자, 그럼 css 를 물려주러 떠나보자. Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 자식 컴포넌트에 스타일을 .. 2022. 1. 7. Styled-components(2) global 스타일 세팅하기 styled-components 를 사용하여 css 를 컴포넌트화 하여 배경색을 변경하는 실습을 해보자. Styled-components(2) global 스타일 세팅하기 src/typings/theme.d.ts global에 원하는 css 를 작성하기 전에, type을 선언하자. import 'styled-components' import { theme } from '../styles' type Theme = typeof theme declare module 'styled-components' { export interface DefaultTheme extends Theme {} } src/styles/theme.ts 그리고 theme 이라는 css 컴포넌트를 만들어주자. 나중에 여기서 필요한 속성을 .. 2022. 1. 4. React(54) 타입스크립트 - 버튼 클릭시 버튼 색상 변경하기 리액트로 메뉴 버튼들을 만드는 중이다. 버튼을 클릭하면 클릭한 버튼의 색이 변하게 만들고 싶다. 자 그럼 지금 만들러 가보자. 결과 화면 미리보기 [메뉴 1] 을 클릭하면 그 버튼이 파란색이 되고, [메뉴 2]를 클릭하면 마찬가지로 해당 버튼의 색이 변한다. React(54) 타입스크립트 - 메뉴 버튼 클릭시 버튼 색상 변경하기 먼저 useState 를 이용하여 버튼의 색상을 변경해볼 것이다. 토글 버튼일 때는 boolean값을 주어서 스위치처럼 이용했었지만, 메뉴 버튼은 스위치 개념이 아니라 boolean 대신 분기를 쳐줄 string 값을 넣어 줄 것이다. TabComponent.tsx const [tab, setTab] = useState('curr'); setDealTab('curr')} // 클.. 2021. 12. 2. React(52) 타입스크립트 - 라우터 없이 메뉴 클릭 시 컴포넌트 내용 변경하기 리액트와 타입스크립트를 사용하여 메뉴를 클릭했을 때, 페이지의 내용을 변경해보려고 한다. 이때 react-router 을 통하지 않고 즉, url 을 변경하지 않고 컴포넌트의 내용을 변경해볼 것이다. 그럼 시작해보자. React(52) 라우터 없이 메뉴 클릭 시 컴포넌트 내용 변경하기 그룹 메시지를 클릭하면 그룹대화 리스트가 나오고, 개인 메시지를 클릭하면 회원 등급 별로 각각 다른 대화리스트가 보여진다. MsgList.tsx 에서는 전체 맥락을 그릴 것이다. 메뉴를 클릭할 때마다 조건이 변경되며 그에 맞는 통신함수가 실행되고 객체를 받아온다. 그리고그 객체를 자식 컴포넌트인 MsgItem 에 넣어주자. MsgList.tsx (import 구문은 생략하였습니다.) const MsgList = (): Re.. 2021. 11. 1. Styled-components(1) 스타일드 컴포넌트 설치하기 지난 시간까지 코딩앙마 님의 강의를 듣고 타입스크립트로 포팅을 해보며 감을 익혔다. 이번 시간부터는 udemy 에서 프로젝트 실습을 시작하였다. 평소부터 배우고 싶었던 styled-components 를 타입스크립트와 연동할 수 있도록 설치하는 과정을 기록해보았다. Styled-components(1) 설치하기 - Styled-components 설치하기 $ npm install styled-components - Typescript(타입스크립트)와 함께 사용하기 위한 라이브러리 설치하기 $ npm install --save-dev @types/styled-components src/styles/global.ts 설치가 다 되었으니 테스트 코드를 짜보자. 흥미로운 점은 css 가 트리 구조로 짜여있다. .. 2021. 10. 12. React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 토글 메뉴가 열렸을 때와 닫혔을 때, border-bottom 의 두께를 다르게 변경하고 싶다. 백문이 불여일견 ! 결과화면을 먼저 살펴보자. 결과화면 미리보기 - 토글 메뉴가 열렸을 때, 빨간박스 안의 border-bottom이 연하다. - 토글 메뉴가 닫혔을 때, 연했던 border-bottom 이 진해졌다. React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 List.tsx 리액트 컴포넌트 내에서 useState 로 선언한 closeList 라는 상태변수를 이용하면 변경 가능하다. 먼저 closeList 라는 변수를 useState 를 통해 선언해주자. const [closeList, setCloseList] = useState(false); 위에서 선언한 closeList가 로직에 .. 2021. 9. 25. 이전 1 2 다음 반응형
