알랑깔랑 React 정리
React의 특징
- 선언형
- 컴포넌트 기반
기능을 먼저 생각한 개발 - 범용성
- 재사용성, 효율성 극대화
Styled-Component ?
Component 안에 CSS(디자인), JS(동작), HTML(렌더링) 이 포함 !
ex) Emotion, Styled-jsx ...
StoryBook ?
다양한 Tool들 중 하나
Styled Component 는 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였습니다. Styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있습니다. 예를 들어 Styled Component 를 이용하여 어플리케이션 내에 다른 웹페이지로 이동하는 기능을 가진 Button 을 하나 만든다면 아마도 아래 코드와 같을 것입니다. 하나하나 살펴보면 우리가 기존에 학습한 JavaScript (React) & CSS 와 크게 다르지 않습니다. JavaScript에서 변수를 선언하듯이(혹은 React 에서 컴포넌트를 만들듯이) Button 을 만들고, tag 의 속성을 정의하고 (여기서는 a tag), back-ticks (``) 안에 기존 CSS 문법을 이용하여 스타일 속성을 정의해 주는 것 뿐입니다.
이것을 한 번 눌러서 참고를 해보자 👉 BBC
- Automatic critical CSS
Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있다. - No class name bugs
Styled Component 는 스스로 유니크한 className 을 생성한다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줌 ! - Easier deletion of CSS
기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 했지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다. - Simple dynamic styling
className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다. - Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다. - Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐, 이외의 것들은 Styled Component 가 알아서 처리해준다.
useRef ?
React는 창조주께서 애초에 내부에서 모든것을 해결할 수 있게 설계를 해놓으셨다.
👉 React에선 JS처럼 DOM 이용하여 사용 ❌
❕ useRef는 외부에 있는 것들을 접근할 수 있게 만든 문법
👉 참조자려형 (배열, 객체, f(x))을 초기값으로 설정해야한다. 🥺TMI : null도 Obj
🚨 주의 꼭 사용해야하는 경우 제외하고 사용을 권장하지 않는다 (이유 : 공식문서에 있음) 🚨
useState👉 state생성 || Update
useRef👉 state 외에 다른 외부적인 접근을 해야하는 상황에 쓰인다.
👉 ex) Chart.js 라이브러리, 애니메이션 ...
오늘의 일기
리엑트 만진다고 정신이 없었던 하루였다
대체 나는 언제쯤 컴퓨터 사고력이 성장할 것인가
하면 할 수록 퇴화되는 기분이 드는것은 기분탓인가
그래도 아주아주 쬐끔씩 지식이 쌓이는 기분은 든다 제발
Sae Eleisa Tera Vi
