CSS 공부

css 속성 우선순위

https://beautifulcss.com/archives/203

.myClass {
 ├── 객체의 노출여부와 표현방식
 │   ├── display
 │   └── list-style
 │
 ├── 위치와 좌표
 │   ├── position
 │   ├── float
 │   └── clear
 │
 ├── 크기와 여백
 │   ├── width / height
 │   └── padding / margin
 │
 ├── 윤곽과 배경
 │   └── border / background
 │
 ├── 글자와 정렬
 │   ├── corlor / font
 │   ├── text-decoration
 │   ├── text-align / vertical-align
 │   └── white-space
 │
 └── 내용
     └── content

 

- const posts = dummy.posts || []; 에서 '|| []' 는 왜 쓰인거야

-> || 연산자는 왼쪽 피연산자가 falsy한 값인 경우에만 오른쪽 피연산자를 반환합니다. Falsy한 값이란, false, null, undefined, 0, NaN, ''(빈 문자열) 입니다.

따라서, dummy.posts가 존재하지 않거나, dummy.posts가 falsy한 값인 경우에는 posts 변수에 빈 배열([])이 할당됩니다. 이를 통해, dummy.posts가 존재하지 않는 상황에서도 코드가 오류 없이 실행되도록 보장합니다.

만약 dummy.posts가 존재하고, truthy한 값이라면 posts 변수에 dummy.posts가 할당됩니다. 이렇게 하면 dummy.posts가 존재하는 경우, 해당 값을 posts 변수에 할당하여 사용할 수 있습니다.

 

*컴포넌트가 렌더링 되는 거랑 마운트 되는거랑 뭐가 다른거야

->컴포넌트가 렌더링(rendering)되는 것과 마운트(mounting)되는 것은 리액트 컴포넌트 라이프사이클 메서드(lifecycle method)의 두 단계입니다.

렌더링은 컴포넌트의 데이터(state or props)가 변경될 때마다 발생하는 과정으로, 컴포넌트의 render() 메서드가 호출되어 가상 DOM을 생성하고, 실제 DOM을 업데이트하는 과정입니다. 이 단계에서는 컴포넌트가 화면에 표시됩니다.

반면, 마운트는 컴포넌트가 최초로 실제 DOM에 추가되는 과정으로, constructor() -> getDerivedStateFromProps() -> render() -> componentDidMount() 메서드가 순차적으로 호출됩니다. 이 단계에서는 컴포넌트가 생성되고, 초기화되며, 실제 DOM에 삽입되어 화면에 표시됩니다.

따라서 렌더링은 데이터 변경으로 인해 반복적으로 발생하는 과정이고, 마운트는 최초에 한번만 발생하는 과정입니다.

 

*react 컴포넌트 생명주기

컴포넌트 마운트 -> 컴포넌트업데이트(props, state) -> 컴포넌트 언마운트