React/소플 React 강의 (3) 썸네일형 리스트형 [2022.07.30]소플 강의 정리 3 소플의 처음 만난 리액트 -초청 강의 수강 Styled Components 스타일 컴포넌트를 따로 한 파일에 정리하고, jsx에서 이용하는 방식을 선호한다 함 클래스를 각 지정해주면 코드의 가독성이 떨어질 수 있음 useNavigate useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공합니다./ 웹페이지를 navigate(탐색)한다. => Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다. react-router-dom에서는 페이지 이동을 위해서 useNavigate()훅을 제공한다. https://basemenks.tistory.com/278 windo.. [2022.07.29]React- 소플 강의 정리2 소플의 처음 만난 리액트 -초청 강의 수강 Hook -훅은 무조건 최상위레벨에서만 호출해야 한다. -컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다. -리액트 함수 컴포넌트에서만(+우리가 직접만든 커스텀내에서도) 훅을 호출해야 한다. -훅이 많아지면 헷갈리기에 상단에 훅을 호출하는 것을 모아 놓아 구분하는 것이 좋음 플러그인 추천 eslint-plugin-react-hooks 의존성배열이 잘못되면 알려줌 Custom Hook 만들기 -이름이 use로 시작하고 내부에서 다른 훅을 호출하는 하나의 자바스크립트 함수 -재사용성을 높이기 위한 목적으로 사용 ▼ 아래와 같이 두가지 예시가 중복되는 코드가 많을 때 사용한다. ▼ 위 코드에서 커스텀 훅을 만든 코드 Custom Hook 사용하기 ▼ 위 .. [2022.07.28]React- 소플 강의 정리 소플의 처음 만난 리액트 -초청 강의 수강 react_sople>react01파일 참고) HTML 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 Tag: 태그를 사용해 뼈대를 만듦 기본 뼈대 태그: html, head, body * Single Page Application 한개의 페이지/ 각각 페이지를 만들면 효율적이지 않기에 한개 html파일 안에 body태그 안에 들어가는 content만 바꿔서 보여줌 =>SPA 리액트의 특징 JavaScript JavaScript : ECMAScript가 정식명칭, 그래서 ES6이런식으로 표준나타내는 용어쓰이는 것(2015년에 나옴,ES2015나 ECMAScript2015라고도 불림), ES12도나옴(2021년) / 생명을 불어넣는 역할, 스크립트 언어의 .. 이전 1 다음
