-
정리하고 싶기엔 너무 많아져버린.... 내용들 모음이노베이션캠프/리액트 연습주차 2023. 7. 10. 22:19
1. 스타일 컴포넌트 이름 짓기
2. filter(css)
3. fontawsome
4. useState 하나로 여러 값 관리하기
5. 숫자 3자리마다 콤마 넣기
6. 특정문자 제거하기
7. 모달창 만들기
8. 상속적용하기 (inherit)
9. 스타일 컴포넌트에서 hover, action 등 사용하기
10. Boolean 과 boolean의 차이
1. 스타일 컴포넌트 이름 짓기
https://heycoding.tistory.com/71
[React] Styled-components Naming
Styled-components란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 기존 돔을 만드는 방식인 css, scss 파일을 밖에
heycoding.tistory.com
2. filter (css) : 이걸로 흐림 효과줌
https://developer.mozilla.org/ko/docs/Web/CSS/filter
filter - CSS: Cascading Style Sheets | MDN
CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
developer.mozilla.org
3. fontawsome 사용
4. useState 하나로 여러 값 관리하기
https://velog.io/@postlist/REACT-useState
[REACT] useState 하나로 여러개 관리하기
하나의 useState 로 여러 개의 상태를 관리하는 방법을 소개한다.
velog.io
5. 숫자 3자리 마다 콤마 넣기
https://codechacha.com/ko/javascript-number-format-comma/
JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법
자바스크립트에서 숫자를 출력할 때, 3자리마다 콤마를 찍고 출력하는 방법을 소개합니다. 구글링해보면 정규식을 이용하여 3자리 마다 콤마를 넣거나, `toLocaleString()`로 특정 국가의 숫자 단위
codechacha.com
6. 특정문자 제거하기
https://hianna.tistory.com/720
[Javascript] 특정 문자 제거하기 - 모두 제거, 대소문자 구분 (replace)
Javascript의 문자열에서 특정 문자를 제거하기 위해서는 replace() 함수를 사용할 수 있습니다. replace() 특정 문자 제거하기 특정 문자 모두 제거하기 특정 문자 대소문자 구분 없이 모두 제거하기 rep
hianna.tistory.com
7. 모달창 만들기
https://cocoder16.tistory.com/84
리액트 모달창 만들기 2가지 방법
방법 1. 직접 모달창 컴포넌트 만들기 먼저 모달창으로 사용할 UI 컴포넌트를 만들기 위해 Modal.jsx 파일을 생성합니다. * Modal.jsx function Modal() { return ( Modal ); } 이 모달 컴포넌트를 렌더링할 부모
cocoder16.tistory.com
8. 상속적용하기 (inherit)
https://www.codeit.kr/community/questions/UXVlc3Rpb246NWUzNDUyMjU4MGU1MTMzNzNkOTYxZmY5
상속이 적용이 안되는 이유?
www.codeit.kr
9. 스타일 컴포넌트에서 hover, action 등 사용하기
https://velog.io/@jm1225/styled-components-NavLink-active-styled-input
styled-components를 사용하여 NavLink의 active 스타일 넣기
styled-components를 사용하기전 리액트와 css를 사용하여 NavLink를 구현하였다. / styled-components 라이브러리를 추가하고 CSS-IN-JS를 적용해보았으나 적용이 안되는 문제가 있었다..
velog.io
10. Boolean 과 boolean의 차이
https://pythontoomuchinformation.tistory.com/493
Boolean과 boolean의 차이 = 참조타입과 원시타입의 차이
우선, Boolean과 boolean의 차이를 알아보자. Boolean (참조타입; reference type) true, false, null 값을 가진다. ∴ Null 체크를 필요로할 때 참조형을 사용하자. boolean (원시타입; primitive type) true, false 값을 가진
pythontoomuchinformation.tistory.com
'이노베이션캠프 > 리액트 연습주차' 카테고리의 다른 글
[TIL] 옵셔널 체이닝(optional chaining) (0) 2023.07.11 [TIL] git clone 하기 (0) 2023.07.11 [TIL] [CSS] Html 요소 우측 정렬하기 (margin: auto) (0) 2023.06.27 [TIL] yarn 설치 성공기... (0) 2023.06.27