본문 바로가기

부트캠프교육중/react80

CDD (Component Driven Development) # 재사용할수있는 UI컴포넌트의 필요성을 느껴 이를 해결하기 위해 등장한 개발방법이 Component Driven Development(CDD)이다. 레고처럼 조립해 나갈수있는 부품단위로 UI컴포넌트를 만들어나가는개발. 컴포넌트단위로 만들어 페이지를 조립하는 개발방식으로 상향식 개발에 가깝다. # 구조적인 CSS가 필요하게 된 이유 -점점 커지는 프로젝트의 규모와 복잡도, 팀원 수의 증가 -모바일이나 태블릿을 비롯한 다양한 디바이스의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야하기때문에 Css는 더 복잡해지게 되었다. 이러한 문제점들을 해결하기 위해 CSS전처리기(CSS Preprocessor)이 등장했다. # CSS 전처리기(CSS Preprocessor) -CSS가 구조적으로 작성될수있게 도움을.. 2023. 2. 20.
useNavigate # useNavigate - 특정행동을 했을때 해당 주소로 이동시켜주는 역할을 한다. - 로그인이 되어있을경우 버튼을 누르면 navigate('/mypage')가 실행되어 mypage로 이동한다. - link와 달리 함수 호출을 통해 특정 조건에 따라 페이지를 이동할수있다. #과제중에 fe-sprint-react-twittler-spa 부분중 useNavigate를 이용해서 뒤로가기 버튼을 만드는 부분 const App = () => { const navigate = useNavigate(); const goBack = () => { navigate(-1); }; const goForward = () => { navigate(1); }; return( 앞으로가기 뒤로가기 ); 2023. 2. 19.
batching 원래 상태변경함수는 동기적으로 동작한다. 근데 비동기적으로 동작하는것처럼 보인다. 왜냐하면 batching기능때문이다! # batching: 여러개의 상태변경함수를 모아서 일괄적으로 처리한후 업데이트 한 내용을 1회의 리렌더링으로 처리한다. 리액트 자체적으로 렌더링 최적화를 한다는 거다. 콜백함수는 누적의 의미로 간다. useEffect, eventhandler 2023. 2. 3.
Effect Hook # useEffect는 컴포넌트내에서 side effect를 실행할수있게하는 hook이다.(결과에 영향을 준다. 값을 변경한다.) #useEffect의 첫번째 인자는 함수이다. 해당 함수 내에서 side effect를 실행하면 된다. *언제실행되나? -컴포넌트 생성후 처음 화면에 렌더링(표시 -컴포넌트에 새로운 props가 전달되며 렌더링 -컴포넌트에 상태(state)가 바뀌며 렌더링 이와 같이 매번 새롭게 컴포넌트가 렌더링될때 effect hook이 실행된다. #주의할점 -최상위에서만 hook을 호출한다. -리액트 함수 내에서 hook을 호출한다. #useEffect의 두번째 인자는 종속성 배열이다. 이 배열은 조건을 담고있다. 조건은 boolean형태의 표현식이 아닌, 어떤 값의 변경이 일어날때를 의.. 2023. 2. 2.

티스토리툴바