Studying Coding Studying Coding

const ref = useRef(value) Example const App =()=>{ const inputRef = useRef() useEffect(()=>{ console.log(inputRef) }) return ( ... ) } console.log => {current : undefined} // 초기값을 설정해주지 않았음 const App =()=>{ const inputRef = useRef() useEffect(()=>{ inputRef.current.focus() // inpput 창이 계속 focus된다. },[]) return ( ... // ref 는 document.querySelector같은 역할 // input인 element를 감지한다. ) }

해당강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=VxqZrL4FLz8 const ref = useRef(value) 함수형 component에서 useRef를 호출시에 ref object를 반환해준다. ref => {current : value} 언제 사용 ? 1. 어떤값을 저장하는 공간 state의 변화 > 렌더링 > 컴포넌트 내부 변수들 초기화 ref의 변화 > no 렌더링 > 변수들의 값이 유지됨 state 의 변화 > 렌더링 > ref의 값이 유지됨 2. DOM 요소에 접근 ex. input 요소에 자동으로 focus를 두고 싶을때 / document.queryselector()같은 역할 Example 1 const countRef = useRef(0) ..

해당글은 아래 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=XfUF9qLa3mU What is memoization ? 특정한 값을 여러번 사용할때 이전에 계산한 값을 casing해 둠으로서 해당값이 필요할때 다시 계산 하는것이 아니라 저장해둔 값을 꺼내서 쓰는 것을 말한다. useCallback useMemo 처럼 value를 저장해두는 것이 아닌 callback함수를 저장하는 방식이다. 함수형 컴포넌트를 호출하면 모든 내부의 변수들이 초기화 된다. 내부의 함수를 useCallback으로 감싸줄경우 처음 호출할때만 함수를 초기화하고 그값을 저장하녀 함수형 컴포넌트를 재 호출할때 useCallback함수는 초기화하는것이 아니라 저장한 함수를 불러온다. Synta..

해당영상을 보고 정리한 글입니다. https://www.youtube.com/watch?v=e-CnI8Q5RY4&t=451s Component성능 최적화 를 위해 사용된다. 자주사용하는 값을 처음 계산을 했을때 저장을 해두고 다음 사용해야할때 꺼내서 쓸수 있게 하는 것. 함수를 렌더링 할때 함수안에 모든 값들은 재 렌더링 된다. 함수 안에 함수가 복잡한일을 하는 함수라면 usememo를 통해 이값을 저장하고 재 렌더링을 막는다. 구조 const value = useMemo(() =>{ retrun calculate(); }, [item]) useMemo(콜백함수 , 배열) 배열 이 업데이트 되어질 때만 콜백함수를 호출해서 변경한다. - 꼭 필요할 때만 사용해야 한다. 성능이 악화될수 있다. Example..

const ACTION_TYPES = { deposit:'deposit', with:'with' } const reducer = (state, action) =>{ console.log('working', state, action); switch (action.type){ case ACTION_TYPES.deposit: return state + action.payload case ACTION_TYPES.with: return state -action.payload default : return state; } } export function App(props) { const [number, setNumber] = useState(0) const [money, dispatch] = useReducer(r..

reaact 에서 component를 만들면 트리형태로 구성이 된다. 위에서 아래로 , 즉 부모component에서 자식 componenet로 props를 통해 전달이 된다. Global data를 props로 일일이 전달하기는 어렵다. 또한 코드가 더러워 지기 쉽다. 때문에 comtext를 사용 > 부모component가 context를 설정하면 자식 component가 useContext를 통해 context를 받아옴 * context는 꼭 필요할때만 사용하는게 좋다. > Context를 사용하면 컴포넌트를 재사용하기가 어려움 짐 > prop drilling을 피하기 위해서 사용한다면 Component Composition을 먼저 고려해보는 것이 좋음 METHOD const value = useCon..

컴포넌트가 렌더링하는 것을 막기 다른 컴포넌트에 의해 렌더링될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 null을 반환하면 해결할 수 있습니다. function WarningBanner(props){ if(!props.warn){ return null; .... } } class Page extends React.Component{ constructor(props){ super(props); this.state = {showWarning : true}; this.handleToggleClick = this.handleToggleClick.bind(this); } render(){ return ( ... ) } }

주의 : component의 이름은 항상 대문자 react는 소문자로 시작하는 componrnt를 DOM태그로 처리하기때문이다. 예시 > HTML div tag 5. State와 생명주기 생명주기 메서드를 클래스에 추가하기 처음 Dom이 렌더링 될때 함수 설정 > '마운팅' 생성된 DOM이 삭제 될때마아 함수 해제 > '언마운팅' 컴포넌트 로컬 state를 업데이트하기 위해 this.setState()를 사용합니다.