킹바구니 🦜

css 내지 scss 등 아무튼 스타일 파일을 모듈로 이렇게 쓰려고 했더니 위와 같은 에러가 났음. import style from "@/styles/style.css"; 1. global.d.ts 파일 생성 declare module "*.css"; 폴더 위치는 src 바로 아래에 만들어주었고 위와 같이 쓰면 된다. scss도 할꺼면 복붙해서 scss로 하나 붙여주면 됨.

리엑트에서 제공하는 JSX문법은 자바스크립트에서도 html같은 코드를 쓸 수 있게 해주는 기능을 가지고 있음. 대신 조건이 있는데 바로 하나의 태그로 감싸야한다는 것이고, 이를 위해 보통 로 감싸곤 함. 근데 컴포넌트가 많아지고 거대질수록 자칫하면 의미도 없는 가 남발할 수 있음. 이걸 soup라고 함. 이를 해결하기 위해서는 이러한 방법이 있음. 1. wrapper 컴포넌트 만들기 const Wrapper = (props) => { return props.children; }; export default Wrapper; 그냥 Wrapper.js라는 파일을 만들어주고 위와 같이 씀. jsx가 아니기때문에 그냥 js파일임. 단순하게 props의 칠드런을 리턴하는데, 리엑트에서 말하는 props의 아이들이란..

다들 알 것이다. 리엑트에서는 함수를 괄호 안쓰고 이름만 쓴다는 거슬.. // jsx 근데 만약에 아래와 같이 파라미터를 넘겨아한다면 어떻게 해야할까? const [age, setAge] = useState(0); const [username, setUsername] = useState(''); const ageHandler = (event) => { setAge(event.target.value); }; const usernameHandler = (event) => { setUsername(event.target.value); }; 이렇게 기본적인 useState와 handler함수가 있다고 침. 그리고 각각의 input태그에 onChange={ageHandler} 이렇게 걸것임. 근데 이거를 한꺼번에..

1. useState로 여러 상태를 관리하는 법 고객 정보를 받는 input이 2개가 있다고 한다면 보통 이렇게 각각 state두고 관리할 것임. const [age, setAge] = useState(0); const [username, setUsername] = useState(''); 그런데 이런 각각의 코드를 const [userData, setUserData] = useState({ age: 0, username: '' }); 이렇게 한꺼번에 받을 수 있음. 어차피 같은 역할을 하는 친구들이면 저렇게 받는게 훨씬 깔끔하고 편할 수 있음. 2. set함수에 콜백함수 쓰는 이유 만약 input창에 onchange 이벤트를 걸어서 쓸때마다 set함수로 해당 변수를 바꿔준다면 이렇게 쓰면 된다. // ..

class 이름을 그냥 쓰거나, 변수로 넣거나, 조건을 걸거나 하는 경우가 있는데 헷갈려서 정리를 해보았음. 추가될 수 있음 1. 기본 그냥 html에 대놓고 쓴다면 쌍따옴표 안에 써주면 된다. 2. 변수 변수라면 중괄호 안에 써주면 된다. 나같은 경우 module.scss를 style이라는 이름으로 import했기에 className에 { style.container } 이렇게 써줌. 3. 기본 + 변수 조합버전은 중괄호 안에 백틱을 넣고 변수는 달러중괄호를 써서 써주면 된다. 아니면 조건문같은 경우 이런 방법도 있다. + 좀 더 고차원적인 방법 const classProperties = { "main-class": true, // 일반 string인 경우 styles: true, // 변수인 경우 }..