2024-11-08(뉴스레터, useState,useEffect)

오늘의 개발 뉴스레터에서 다음과 같은 제목이 궁금해서 클릭해보았다

참고

http와 https 대신 hxxp와 hxxps를 사용하는 이유

http, https는 들어봤지만 hxxp와 hxxps는 첨들어봤다

위에 블로그에 적힌 내용이지만,

우발적인 클릭방지, 피싱공격예방, 링크생성 방지등 보안에 있어서 좋은듯해보였다

 

Void 함수 : 함수안에 return이 없는 함수

()=>{...} : 함수몸통, ()=>({...}) : 객체

이벤트핸들러 : 이벤트 객체(e)를 갖음

계산된 속성명👇

const obj = {
	a = 10
}
obj[a]; // error
obj["a"]; // 10

 

useState  : 비동기함수

리액트는 batching처리한다(한번에 처리)

setState(업데이터함수) : 이전 상태에 의존하는 경우

setCountries(prevItmes => [...prevItmes,newItems])

useState 초기화 함수 : 랜더링후 한번만 실행

 const [todos, setTodos] = useState(()=>createInitialTodos()); //

 

$이름 이렇게만 쓰면 $이름={true}랑 같음

<Input placeholder="Enter your text" $error={false} $disabled={false} />

 

스타일컴포넌트 - 상속

const Button = styled.button`
	...
`

const UpdatedButton = styled(Button)`//Button 상속
	...
`

 

스타일컴포넌트 - html 속성까지도 지정 (advance)

const Input = styled.input.attrs({
  type: 'text',
  placeholder: 'Enter text here'
})`
  padding: 10px;
  font-size: 16px;
`;

path parameter

<Route path="/detail/:id" element={<Detail />} /> // :id를 path parameter라고 함

 

useEffect훅안에 비동기 코드사용(fetch,setTimeout등등)

useEffect(()=>{
    // 리액트 외부의 시스템 이용 시 이곳에서 해주세요.
    // window.addEventListner("click", ()=>{});
    // setTimeout(()=>{}, 1000);
    // fetch(서버URL)
}, [])

 

return()실행후에 useEffect훅 실행

useEffect(()=>{
	// setup 함수 실행 시점
	// 1. 컴포넌트 마운트 이후 실행
	// 2. depenency array에 변화된 값이 있는 경우, 클린업 함수 이후에 실행
	
	return ()=>{
		// 클린업 함수 실행 시점
		// 1. 페이지 이동으로 인해 다른 컴포넌트가 마운트 된 후에 실행
		// 2. dependency array안의 값이 변경되었을 때 리렌더링 이후 곧바로 실행
	}
}, [state])