[본캠프 12주차] 목요일 TIL

01/09 일일 목표📝

 

리액트 숙련 강의 듣기

디자인 집중반

 

---

 

 

📖 오늘 배운 내용

 

styled-components 란?

• 리액트에서 css-in-js 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지
• css를 별도의 파일에 분리하지 않고. javascript 코드 안에 작성이 가능
• 스타일과 로직이 같은 파일에 있어 유지보수가 용이하다

 

 

조건부 스타일링과 리팩토링

 

조건부 스타일링이란?

• 특정 조건에 따라 컴포넌트의 스타일을 동적으로 변경하는 방식
• props와 state를 활용해 조건에 따라 스타일 변경이 가능

 

리팩토링은

• 기존 코드의 동작을 유지하면서 구조를 개선하여 가독성, 유지보수성, 재사용성을 높이는 작업
• 중복 스타일을 줄이고 코드의 효율성을 높이기 위해서 리팩토링이 가능

 

 

 

함수형 업데이트?

• react의 usestate에서 현재 상태값에 의존하는 업데이트를 수행할때 사용하는 방식
• 상태업데이트가 즉시 반영되지 않을때, setstate를 호출해도 바로 실행된 결과를 확인 할 수 없고, 리액트가 렌더링을 마친 뒤에야 새로운 상태값이 반영될때 유용
• 성능 최적화가 필요할때 유용

// src/App.js import { useState } from "react"; const App = () => {   const [number, setNumber] = useState(0);   return (     <div> {/* 버튼을 누르면 1씩 플러스된다. */}       <div>{number}</div>        <button         onClick={() => {           setNumber(number + 1); // 첫번째 줄            setNumber(number + 1); // 두번쨰 줄           setNumber(number + 1); // 세번째 줄         }}       >         버튼       </button>     </div>   ); } export default App;

// src/App.js import { useState } from "react"; const App = () => {   const [number, setNumber] = useState(0);   return (     <div> {/* 버튼을 누르면 3씩 플러스 된다. */}       <div>{number}</div>       <button         onClick={() => {           setNumber((previousState) => previousState + 1);           setNumber((previousState) => previousState + 1);           setNumber((previousState) => previousState + 1);         }}       >         버튼       </button>     </div>   ); } export default App;

 

일반 사용법과 함수형 업데이트의 차이점

• setnumber(number + 1) 를 3번 넣어도 1씩 증가
• 일반 사용법에서는 각각 실행되는 것이 아니라 배치로 처리하여 명령을 하나로 모아 한번만 실행함
• 함수형 업데이트에서는 number가  3씩 증가함
• 함수형 업데이트방식은 3번 동시에 명령을 내리면 명령을 순차적으로 각각 1번씩 실행

 

 

useEffect란?

리액트에서 컴포넌트가 렌더링 된 후에 어떤 작업을 실행하고 싶을 때 사용하는 훅

 

 

 

의존성 배열

이 배열에 값을 넣으면 그 값이 바뀔 때만  useEffect를 실행한다.

 

 

 

link태그를 써도 브라우저 안에서는 a 태그로 변환됨