2024-04-03 (78일차) - 리액트 : CSS, JIT
2024-04-03, 78일차
TODO
[리액트]
- 리액트 구조 복습 (90%)
- map 문법 구글링 (85%)
- prop 사용법 구글링 (80%)
- useRef 필요한 이유 구글링 (40%)
- 강의 다시보고 이해하기
- 리액트(React), 작업 10, MUI snack Bar 컴포넌트, Alert (80%)
- 리액트(React), 작업 4, button 에 tailwind와 mui 적용 (98%)
- 리액트(React), 작업 7, MUI button 컴포넌트, React Icons (100%)
- 리액트(React), 작업 8, MUI App Bar 컴포넌트 (95%)
- 리액트(React), 작업 9, MUI App Bar 컴포넌트 fixed (100%)
- 리액트(React), 작업 14, TodoList 적용, 할일 추가 폼 (90%)
- 리액트(React), 작업 15, dateToStr 모듈화, App에 적용, theme를 App에서 분리, 공통 테마 적용 (95%)
- 리액트(React), 작업 16, TODO 추가 폼 꾸미기 (80%)
useEffect 사용
useEffect를 사용하여 TODO를 추가하니 TODOlistItem이 두번씩 보여지는 문제가 생김.
React.useEffect(() => {
todosState.addTodo('스쿼트');
todosState.addTodo('벤치');
todosState.addTodo('데드');
}, []);이유는, Next.js 환경에선 useEffect가 두번 호출된다고 한다.
참고
Next.js 의 개발 환경에서는 이 stirct mode 가 활성화되어 있다.
strict mode 는 개발 환경에서 어플리케이션을 더 엄격하게 검사하여 예상치 못한 버그를 사전에 찾아내는 데에 도움을 주는 기능이다.
이를 활성화 하게 되면,
1. 컴포넌트의 불완전한 렌더링을 검사하기 위해, 한 번 더 렌더링된다.
2. Effect 클린업 함수를 작성하지 않아 발생하는 버그를 검사하기 위해, Effect 들을 한 번 더 실행한다.리스트 역순 출력
//정순
setTodos((todos) => [...todos,newTodo]);
};
//역순
setTodos((todos) => [newTodo, ...todos]);
};CSS 변수
- 본인과 본인자식이 아닌경우 접근 할 수 없다. 부모나 형제는 접근불가.
/* CSS 지역 변수 선언 */
div {
--color: gold; /* 변수선언 */
color: var(--color); /* 변수활용 */
}
/* CSS 전역 변수 선언 */
:root { /* root = 최상위 = html과 같음 */
--color: gold;
}JS에서 정의된 색상을 CSS에서 활용
<div>
안녕하세요
</div>div {
background-color: var(--mui-primary-main);
color: var(--mui-primary-contrastText);
font-size: 4rem;
font-weight: bold;
}
style.setProperty -> style속성을 정의하다
const palette = {
primary: {
main: "#2196f3",
light: "rgb(77, 171, 245)",
dark: "rgb(23, 105, 170)",
contrastText: "#fff"
}
};
const r = document.querySelector(":root");
console.log(r);
r.style.setProperty("--mui-primary-main", palette.primary.main);
r.style.setProperty("--mui-primary-contrastText", palette.primary.contrastText);JIT (Just In Time mode in Tailwind CSS)
사용예시
w-3;
w-[10px];
<li class="border border-red-500 bg-red-300 group-hover:text-blue-600">
<a href="#" class="text-[3rem]">아이템3</a></li>
mui theme color CSS에서 활용 할 수 있게 CSS 변수화
<div className="tw-p-10 tw-rounded-[20px] tw-shadow tw-whitespace-pre-wrap tw-leading-relaxed tw-break-words tw-text-[--mui-color-warning-main]">
React 복습
componenet
component 사용
- 반복적인 html 축약할 때
- 큰 페이지들 나누기
- 자주 변경되는 것들
- 컴포넌트를 만들 때는 함수로 만들어야하고 대문자를 사용해야 함
- return 값으로 html 코드를 리턴하면 됨
props
- Props는 부모 컨포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있음
//props는 오브젝트이기 때문에 {} 중괄호를 열고 text라고 적어줌
function Btn({text}) {
return
<button
style={{
backgroundColor: "tomato",
color:"white",
padding:"10px 20px",
border:0,
borderRadious:10,
}}>
//{text}로 변경
{text}
</button>;
}
function App() {
return (
<div>
<Btn text="Save Changes"/>
<Btn text="Contunue"/>
</div>
)
}useRef
Ref를 사용해야 할 때
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
- 애니메이션을 직접적으로 실행시킬 때
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
map (반복문)
const numbers = [1, 3, 5];
const listItems = numbers.map((number, idx) => {
console.log(number);
});
hello world