react

DOM onclick vs React onClick

아래 두 코드의 차이가 뭘까? ex1 ex2 위의 버튼에서 작성한 onClickButton()의 경우에는 DOM의 Event, 아래는 리액트의 Event이다. 둘의 가시적인 차이는 react에서는 camelCase 컨벤션을 따른다. 또한 DOM Event의 경우에는 외부 자바스크립트를 언제든 쓸 수 있지만 React의 경우에는 이벤트를 반드시 컴포넌트가 생성될 때 명시돼있어야 한다. 참고자료 아티클

CRA에서 craco이용해 @components 절대경로 설정

오랜만에 react로 개발하면서 tsconfig에서 절대경로를 설정을 하는데 안되서 알아보니 cra로 세팅한 경우에는 craco 사용해서 또다른 설정을 해줘야한다. 검색을 조금 해보니 react 버전 18에서는 잘 안된다고 하던데 아래 참고 블로그 따라서 해보니 정상적으로 설정됐다. 며칠동안 설정이 안되서 끙끙 앓았는데 깔끔하게 해결-! Error [Craco-Alias Error] Cannot parse tsconfig.paths.json. Please validate it on https://jsonformatter.curiousconcept.com. 위와 같은 에러 발생 시 tsconfig.paths.json파일 마지막 항목에 ","를 붙엿는지 확인해보자. 지우고 실행하면 해결! json이기 때문에..

[CSS] custom checkbox 만들기

checkbox를 css로 커스텀하기는 너무나 어렵다. 인터넷에서 열심히 찾아서 알아낸 방법. 잊지 않기 위해 적는다. All /*CSS*/ .all { position: absolute; opacity: 0; } .all:checked ~ .option > .checkmark { border-width: 1px; background-color: red; } .all:checked ~ .option > .checkmark:after { display: block; } .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid red; border-radius: 5px; margin-right: ..

[React] React Hooks - useState, useEffect

Hooks는 혼란을 야기했던 Class없이 React의 기능을 사용할 수 있게 해준다. Hooks는 함수 컴포넌트에서 React state와 생명주기(lifecycle features)을 연동할 수 있게 해주는 함수들을 말한다. React Hooks는 다음과 같은 사용 규칙이 있다. React 함수 컴포넌트 내에서 호출해야 한다. 컴포넌트 내 최상위에서 호출해야한다. 1. useState state값은 컴포넌트가 렌더링 돼도 유지되며, 컴포넌트가 렌더링될 때 한번만 생성된다. 아래 코드에서 0의 자리에는 초기값을 넣는다. function Sample() { // 선언 const [count, setCount] = useState(0); return( {count} setCount(count+1)}> ) ..