김성원의 코딩 일기

1. 플레이그라운드 - TS를 확인할 수 있는 웹에서 어떻게 적용되는지 어떻게 사용하는지, 사용 예시를 직접 해봏 수 있는 사이트 입니다. typescriptlang.org/ 2. React에 TS 적용하기 - 리액트로 TS를 적용하기 위해서는 다운을 받아야 된다~~ 그런데 2가지의 상황이 있다. 1. 처음부터 React를 만들 때 함께 설치하기 npx create-react-app 내 앱 이름 --template typescript 2. 만든 프로젝트에 적용하기 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 3. styled-components 사용하기 - styled-components를 설치하고 ..

1. 선언하기 아래의 패키지를 설치 후 사용할 수 있다. npm i styled-components 함사 밖에 선언해 컴퍼넌트 선언처럼 사용을한다. 기본적은 형태는 import styled from 'styled-components'; const 변수명 = styled.태그` css 작성 `; function App() { return ( ); } export default App; 2. css컴퍼넌트에 몇 개 요소만 변경하고 싶을 때 1. prop스로 선언하여 css에 적용하기 - JSX에 선언한 컴퍼넌트에 prop를 선언하고 원하는 css에 넣는다. 예) import styled from 'styled-components'; const Box = styled.div` width: 100px; heig..

- React css를 적용하는 방법은 제가 알고 있는 부분에서는 5가지가 있다. 1. 태그에 직접 적용하기 이것은 html안에 style을 적용하는 것이랑 동일하며 JSX문법에 속하고 태그 안에 style를 선언한 후 {{}} 중괄호 2개를 선언하여 중괄호 안에 적으면 된다. css랑 조금 다르게 객체의 형태로 반환해야 한다. 예) 테그에 적용하기 가시성도 안 좋아지고 모든 태그에 직접 다 적용해야 한다는 단점으로 잘 사용 안 하는 것으로 알고 있다. (그냥 안 씀.) 2. css파일을 import로 불러오기 이 방법은 기존의 html과 css파일을 불러와 사용하는 것이랑 비슷하다. 하지만 단점이 있는데 리액트는 싱글페이지이다. 즉, 상단의 파일에 선언이 되어 있으면 하위 파일에도 적용이 된다는 단점이..