본문 바로가기

전체 글

 (73)
CSS 스타일링 방식 일반 CSS 컴포넌트를 스타일링하는 기본적인 방식 Sass CSS 전처리기 CSS문법을 사용하여 CSS코드를 더욱 쉽게 작성 CSS Module CSS 클래스가 다른 CSS 클래스의 이름과 충돌 방지 파일마다 고유한 이름을 자동으로 생성해줌 styled-components 스타일을 자바스크립트 파일에 내장시키는 방식 스타일 작성과 동시에 스타일 적용된 컨포넌트 만들 수 있음 Scss (Sass) 자주 사용하는 스타일 시트들을 변수처럼 관리 utils 함수 분리하기 자주 사용될 수도 있는 Sass변수 및 믹스인을 별도의 파일로 분리 @import로 서로 다른 css파일 불러올 수 있음 sass-loader 설정 커스터마이징 .../을 어렵게 하지말고 ~로 쉽게 node_modules에서 불러..
개념 정리 액션 상태에 어떤 변화가 필요하면 액션이라는 것이 발생 반드시 type 필드를 가지고 있어야 함 액션의 이름 필수 리듀서 변화를 일으키는 함수 액션을 만들어서 발생 => 리듀서 : 현재 상태, 전달받은 액션 객체를 파라미터로 받음 => 두 값을 참조하여 새로운 상태로 만들어서 반환 예제 const initialState = { counter : 1 }; function reducer(state = initialState, action) {//현재 상태, 액션객체를 파라미터로 받음 switch(action.type) { case INCREMENT : return{ counter : state.counter + 1//새로운 상태를 만들어 반환 }; default : return state;//새로운 상태를 ..
Hooks useState 정의 상태 값 관리 예제 import React, {useState} from 'react'; const Info = () => { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); const onChangeName = e => { setName(e.target.value); }; const onChangeNickname = e => { setNickname(e.target.value); }; return( 이름 : {name} 닉네임 : {nickname} ); }; export default Info; 이름, 닉네임 받는 코드 useEffect 정의 리엑트 컴포넌트가 렌더링될 때마다 특..

티스토리툴바