TIL] 리액트 기초

SCSS

SCSS, SASS 둘 다 CSS를 편하게 쓰도록 도와줍니다.

기본 문법은 CSS와 동일합니다.

다른 점이 있다면 각 하위 태그들에 스타일을 줄 때

각각 다른 블럭을 만들어 쓸 필요가 없습니다!

//scss

div{
  p{
     color: 원하는 색;
     font: {
          family: 글씨체;
    	  size: 사이즈;
     }
  }
  
  div {
      background-color : 원하는 색
      &:hover { background-color: 원하는 색 }
      
$defaultSize: 원하는 사이즈

p{
    font-size: #{$defaultSize};
}

---

styled-components

class 이름 짓는 것을 안 할 수 있습니다!

컴포넌트에 스타일을 적기 때문에 비교적 간단하고 직관적이라 할 수 있습니다!

<div>
	<Example>내용</Example>
</div>

const Example = styled.div`
	각 주고싶은 스타일
`;

---

가상 돔

DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고 수정을 한다면

필요 없는 연산이 너무 많이 일어나기 때문에 가상 DOM이 등장했습니다.

가상 돔은 메모리 상에서 돌아가는 가짜 DOM이며

가상 돔의 동장 방식은 기존 DOM과 어떠한 행동 후 새로 그린 DOM을 비교해서

정말 바뀐 부분만 갈아 끼워주게 됩니다.

처음 페이지에 진입했을 때와 데이터가 변했을 때 DOM을 새로 그리게 됩니다.

하지만 DOM은 사이트 구조에 따라 가상 돔을 쓰는 것보다 훨씬 성능이 좋을 수 있고

성능이 떨어질 수 있기에 상황에 맞게 사용해야 합니다!

---

라이프 사이클

컴포넌트의 라이프 사이클( 컴포넌트 생명주기)은 중요합니다.

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클입니다.

컴포넌트는 생성되고 수정되고 사라집니다.

생성은 처음으로 컴포넌트를 불러오는 단계이며

수정은 사용자의 행동으로 데이터가 바뀌거나 부모 컴포넌트가 렌더링 할 때 업데이트됩니다.

ex ) props가 바뀔 때, state가 바뀔때, 부모 컴포넌트가 업데이트되었을 때(리 렌더링 했을 때), 또는 강제 업데이트했을 경우입니다.

제거는 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계입니다.

라이프 사클 유용한 함수

constructor() : 생성자 함수 ( 컴포넌트가 생성되면 가장 처음 호출됩니다.)

render() : 컴포넌트의 모양을 정의합니다. 여기서도 state, props에 접근해서 데이터를 보여줄 수 있습니다.

componentDidMount(): 컴포넌트가 화면에 나타나는 것을 마운트라 합니다. didMount는 마운트가 완료되었다는 뜻입니다.

componentDidMount 함수는 첫 렌더링을 마친 후 딱 한번 실행되고 컴포넌트가 리 렌더링 될 때는 실행되지 않습니다.

componentDidUpdate(): 리 렌더링을 완료한 후 실행되는 함수입니다.

componentWillUnmount(): 컴포넌트가 DOM에서 제거될 때 실행하는 함수입니다.

---

단방향 데이터 흐름

데이터는 위에서 아래로, 부모에서 자식으로 넘겨줍니다.

---

Event Listener

이벤트 리스너는 사용자가 어떤 행동을 하는지 아닌지 알려줍니다.

대표적으로 마우스 클릭, 터치, 마우스 오버, 키보드 입력 등이 자주 쓰입니다!

---

오늘은 스파르타 코딩 클럽 리액트 2주 차 강의를 들었습니다!

어려운 내용이 많았지만 확실히 재미있었습니다!

2주차 강의를 들으면서 실습?을 하면서 정말 많은 시행착오가 있었지만

2주차 강의를 완강했고 많은 것을 배운 것 같습니다!

아직은 어렵고 헷갈리는 개념들이 많지만

열심히 공부해서 부족한 부분들을 채워야 할 것 같습니다!

파이팅!!

👍👍✍️✍️✍️✍️