리액트 공부
React Hooks
useRef
Javascript를 사용할때는 항상 특정 DOM 을 선택해 querySelector , getElementById 등등 DOM selector함수를 사용해 DOM을 집어왔었습니다 .
리액트를 사용할때도 가끔 DOM을 직접 선택해야하는 상황이 있습니다 . 저같은 경우 input 창에 focus를 하는데에 사용하곤 했습니다 .
그럴땐 리액트에선 ref 를사용합니다 .
import react , {useState, useRef} from 'React'
function App() {
const [ input , setInput ] = useState('')
const nameInput = useRef();
const focusOnInput = () => {
nameInput.current.focus();
}
return (
<>
<input value={input} onChange={(e) => setInput(e.target.value) ref={nameInput}}
<button onClick={focusOnInput}>focus</button>
</>
)}
이렇게 코드를 작성하면 버튼을 눌렀을때 input 에 focus 가 잡힙니다 .
보통 이렇게 작성하지않고 useEffect를 이용해 빈 dependency를 넣고 페이지가 새로 로드될때마다 포커스를 맞추는 식으로 합니다.
useEffect(() => {
nameInput.current.focus();
} , [])
useRef()를 사용하여 Ref 객체를 만들고 , 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주어야 합니다 . 그러면 Ref객체의 .current 값은 우리가 원하는 DOM을 가르키게 됩니다 .
useEffect
컴포넌트가 마운트(처음 나타났을 때) , 언마운트(사라질 때) , 업데이트 시 특정 작업을 처리합니다.
useEffect 를 사용 할때에는 첫번째 파라미터에선 함수 , 두번째파라미터에는 의존성 배열 [] 을 넣습니다 , 의존성 배열안에 값이 없다면
컴포넌트가 처음 나타날때에만 useEffect에 등록된 함수를 호출합니다 .
useEffect 안에서 사용하는 상태나 , props가 있다면 useEffect의 의존성 배열에 넣어주아야 합니다 .
그렇지않는다면 useEffect에 등록된 함수가 실행될때 최신 props / state를 가르키지 않게 됩니다 .
useMemo
useMemo 의 첫 번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고,
두번째 파라미터에는 의존성 배열을 넣어주면 됩니다.
이 배열안의 넣은 내용이 바뀌면 , 우리가 등록한 함수를 호출해서 값을 연산해주고 ,
만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 됩니다 .
count memo = useMemo(() => countNumbers(number) , [number])
기본적으로 리액트에서는 부모컴포넌트가 리랜더링되면 자식 컴포넌트도 랜더링이 됩니다 ,
특히 state가 왔다갔다 하는 상황에서 상위 컴포넌트의 state 가 하나라도 바뀌는순간 자식 컴포넌트들은 전부 재 랜더링이 되죠 .
이는 웹개발에서 가장 중요한것중 하나인 퍼포먼스가 떨어질수도 있는 위험입니다 .
그러므로 때에 따라서 쓸모없이 함수가 한번더 실행이 될수도 있습니다 . 그럴때에 useMemo를 쓰면 성능을 최적화 시킬 수 있습니다 .
useReducer
상태를 관리하는 또 다른 방법입니다 .
const [ state , dispatch ] = useReducer(reducer, initialState);
state 는 이 컴포넌트에서 사용할 state 이고 , dispatch는 액션을 발생시키는 함수라고 생각하시면 됍니다 .
dispatch는 객체를 통과시켜 사용합니다 . dispatch({type: "INCREASE" });
useReducer에 넣는 첫번째는 reducer 함수이고 , 두번째 파라미터는 초기 상태입니다 .
보통 switch 문을 사용해서 reducer를 작성하는것 같은데 , 저는 if 문이 편해서 주로 if문으로 작성합니다 .
const reducer = (state, action) => {
if(action.type ==="INCREASE") {
return state + 1
}
}
return state
만약 파라미터를 받아야하는 함수를 짜야한다면 ,
const deleteTask = (id) => {
dispatch({type:"DELETE" , payload: id})
}
const reducer =(state , action ) => {
if(action.type==="DELETE") {
return {...state , list : state.list.filter(item => item.id !== action.payload)}
}
return state
}
이런식으로 작성을 하면 됍니다 .
key
배열을 렌더링 할때에 map이라는 함수를 가장 많이 사용하는데 , map 을 돌린 후 가장 상위 요소에 key 값을 부여해 주어야 합니다 .
기본적으로 key값은 중복되지않는 고유한 번호로 사용되어야 합니다 .
key 값이 있는 이유는 배열이 업데이트 될 때 key 값을 이용하여 업데이트를 효율적으로 하기 위함입니다 .
key값이 없다면 중간값이 바뀌었을 때 그 하위 값들이 전부 변합니다 . key값을 사용한다면 key를 이용해 중간의 값을
추가하게 됩니다 .
CSS 가상 클래스 공부
ABC:first-child : 선택자 ABC가 형제 요소중 첫째라면 선택
ABC:last-child : 선택자 ABC가 형제 요소중 막내라면 선택
ABC:nth-child : 선택자 ABC가 형제 요소중 (n)째 라면 선택
ABC:nth-child(2n) : n 은 0부터 시작 , 2n 은 2의 배수만큼 선택 , 즉 짝수번만 선택 ex) 2 , 4 , 6 ,8
ABC:nth-child(2n+1) : 훌수번만 선택
ABC:not(XYZ) : 선택자 XYZ가 아닌 ABC 요소 선택
ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는동안 선택
ABC:active : 선택자 ABC요소에 마우스를 클릭하고 있는동안 선택
ABC:focus : 선택자 ABC요소가 포커스 되면 선택
가상요소
ABC::before : 선택자 ABC 요소의 내부앞에 내용(Content)을 삽입 .
.box::before {
content: "" ;
}
ABC::after : 선택자 ABC 요소의 내부뒤에 내용(Content)을 삽입 .
.box::after {
content: "" ;
}
** content속성은 필수 !
before , after 가상요소는 inline 특성을 지니고 있습니다 .
따라서 width , height 을 주기위해서는 block으로 바꾸어주어야합니다 .
속성 선택자
[ABC] 속성 ABC를 포함한 요소 선택
[disabled] : {
color: red;
}
[type] : {
color: red;
}
[type = "password"] : {
color : red;
}
CSS 강제상속
inherit
선택자 우선순위
1. ! important
2. 인라인선언
3. ID선택자
4. 클래스 선택자
5. 태그선택자
6. 전체선택자