안녕하세요

리액트 Link 컴포넌트 리액트에서 페이지를 이동할 때는 태그의 href 대신 Link를 사용합니다. 태그의 href는 페이지를 새로 불러오기 때문에 새로운 데이터를 렌더링해주게 됩니다. Link 컴포넌트는 브라우저의 주소를 이동하지만 페이지를 새로 렌더링하지 않습니다. Link는 to 태그를 이용합니다. 리액트 Swiper dots 구현하기 Swiper 컴포넌트에 ref를 주었습니다. ref는 태그이름.current로 해당 태그에 접근할 수 있습니다. react Swiper에서 dots기능을 구현하려면 ref를 이용해 MSG.current.swiper.slideTo() 속성을 이용합니다. {SLIDE.map((dot, idx) => ( MSG.current.swiper.slideTo(idx + 1)} ..

(1) 컴포넌트와 데이터 구조 리액트에서는 같은 레벨에서 데이터를 주고받는 것이 불가능 합니다. 부모에서 자식으로 내려가는 단방향으로방 데이터를 전달할 수 있습니다. 이를 트리형 구조라고 합니다. (2) 데이터를 전달하는 방법 부모에서 만든 [data, setData] = useState();를 이용하여 data와 setData를 각각의 자식에게 하나씩 전달하면 됩니다. data는 DiaryList로 전달하고 setData는 DiaryEditor로 전달하여 수정하는 방식으로 같은 레벨간에 state를 수정하고 렌더링하게 됩니다. 다시 말해, setData와 같은 Event는 부모로 올려 보내고, data는 아래로 내려보내는 구조라 할 수 있습니다. state 끌어올리기라고 할 수 있습니다. (역방향 Ev..

(1) onChage 함수와 e.target 매개변수로 자기 자신의 속성에 접근할 수 있습니다. { console.log(e.target.value); }} /> e.target.value와 같이 접근할 속성인 value를 선택할 수 있습니다. (2) input 태그가 한 줄의 입력창을 만든다면 textarea는 여러 줄의 입력창을 만들 수 있습니다. { setContent(e.target.value); }} /> (3) 역할이 비슷하다면 state를 묶어서 사용하면 됩니다. const DiaryEditor = () => { const [state, setState] = useState({ author: "", content: "", }); (4) 객체를 통째로 업데이트 하는 것이기 때문에 target...

stlyed components라는 CSS-in-JS 라이브러리를 통해서 CSS도 손쉽게 JavaScript에 삽입할 수 있습니다. 1. 패키지를 설치합니다. $ npm i styled-components 2. styled 함수를 import 합니다 import styled from "styled-components"; 3. css를 다음과 같이 백틱(``) 안에 작성합니다. styled.button` color: red; `; 4. 스타일을 컴포넌트로 만들로 children을 props로 각 css 스타일을 적용합니다. function Button({ children }) { return {children}; } 5. 이를 export하고나서 가져다 쓰면 됩니다. import Button from "...