styled Components, useState, useEffect, useRef, html태그

styled Components Css-in-js
 
css-in-js 는 
js코드로 css코드를 작성하고 컴포넌트를 꾸미는 방식
props를 통해서 부모 컴포넌트에서 자식으로 넘겨서 조건부 스타일링이 가능함

사용방법 : styled. html요소

styled components의 장점 
조건부 스타일링 가능 
className을 쓸땐 if문 같은 js문법은 못썼지만
styled components는 if문같은 문법 사용이 가능해짐 


styled components는 해당 컴포넌트 내에서만 

Sass(Syntactically Awesome Style Sheets)
css를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어 
코드의 재사용성을 높히고 가독성을 더 좋게함

Sass 의 특징, 예시
변수사용 가능,

$color : $4287f5;

$borderRadius : 10rem;

div{

background : $color

border-radius : $borderRadius

}

중첩할수 있음,

label {

  padding: 3% 0px;

       width: 100%;

       cursor: pointer;

       color: $colorPoint;

 

       &:hover {

         color: white;

         background-color: $color;

       }

 }

다른 style파일을 import할수있음.,

$color1: #ed5b46;

$color2: #f26671;

$color3: #f28585;

$color4: #feac97;

 

@import "common.scss";

   

.box {

 background-color: $color3;

default style을 제거하는 방식 reset.css
왜 쓰는가? chrome , firefox 등 브라우저가 많은데 기본 css 값이 다 다르기 때문에 초기화를 한번 해야함


React Hooks - useState

-가장 기본적인 hook
-함수형 컴포넌트 내에서 가변적인 상태를 갖게함
 
const [state, setState] = useState(초기값);

함수형 업데이트.

기존의 방법 

ex <button onClick = {()=?{

  setNumber(number + 1);

  setNumber(number + 1);

  setNumber(number + 1);

 }}

배치성으로 처리함( 배치업데이트) 
리액트는 명령들을 모아서 최종적으로 한번만 실행함 . 동일함수는 한번만 실행하게됨

함수형 업데이트

setNumber((currentNumber) => currentNumber + 1);

          setNumber((currentNumber) => currentNumber + 1);

          setNumber((currentNumber) => currentNumber + 1);

순차적으로 한번씩 실행함 왜냐? currentNumber가 계속 바뀌기 때문임
리액트는 왜 배치업데이트가 되도록 설계를 했는가?
리액트 환경안에서 렌더링이 잦은건 좋은게아님(렌더링이 잦다 =성능에 이슈가 있음)
예를들면 
손님,웨이터,주방이 있다고하면
손님이 피자, 스파게티, 콜라를 주문할려고하면 
웨이터는 한번에 주문을 받지 피자주문을 주방에 한번 ,스파게티한번, 콜라 한번 이런식으로 하지않음
이 과정을 줄이기 위해 리액트는 배치업데이트를 채택했음.

React Hooks -  useEffect : 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅 
-컴포넌트가 화면에 보여졌을때
-컴포넌트가 화면에서 사라졌을때(return)

의존성 배열(Dependency Array)이 왜 필요한가? 

function App() {

  const [value, setValue] = useState("");

  useEffect(() => {

    console.log("Hello useEffect");

  });

  return (

    <div>

      <input

        type="text"

        value={value}

        onChange={(event) => {

          setValue(event.target.value);

        }}

      ></input>

    </div>

  );

}

이런 react코드가있다면 우리가 원하는건 처음 한번 렌더링이 될떄만 useEffect가 동작하길 원하지만
지금은 input태그에 텍스트를 입력하면 동작을 함. 이걸 방지하기 위해 필요함

function App() {

  const [value, setValue] = useState("");

  useEffect(() => {

    console.log("Hello useEffect");

  }, []);}

이런식으로 함수가 끝난 뒤 , [] 를 넣으면 됨 . 만약 value 값이 변할때 마다 console.log 를 찍고싶으면 배열에 value를 넣어주면 됨.

React Hooks - useRef 를 사용하는 이유 
리액트에서도 DOM을 선택해야 할 상황이 생김. 

useRef는 2가지 용도로 사용됨
1.저장공간 
- state와 비슷한 역할을 함 단 state는 변화가 일어나면 다시 렌더링이 일어남. 내부 변수들은 초기화가 됨
- ref에 저장된 값은 렌더링을 일으키지 않음. 즉 ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화 되는것을 막을수 있음
- state는 리렌더링이 필요할때 쓰면됨
- ref는 리렌더링을 발생시키지않는 값을 저장할 때 사용됨

특정 input이 focusing 돼야한다면 useRef 쓰면됨

 

시맨틱 html을 지키는 이유가

접근성 향상 : 태그는 의미있는 정보를 제공함. 

태그는 최상단에 위치할것이고 

는 최하단 이런식으로 태그 이름만으로 뭔지 유추가 가능

SEO 최적화 검색엔진은 콘텐츠의 의미를 더 잘 이해할 수 있도록 돕는 의미론적 태그를 사용하여 페이지를 더 효과적으로 인덱싱하여 검색 엔진 결과 순위를 높힘.

유지보수 용이성 : 태그는 코드의 가독성을 높여, 개발자들이 웹사이트를 더 쉽게 이해하고 유지 보수할수 있게 함