MD 기록저장소

리액트를 사용하는 이유 중 데이터바인딩이 쉽다는 것이 있었습니다. 특히 state를 활용하여 데이터 바인딩을 하면 재렌더링도 자동으로 수월하게 되기 때문에 무척 편리했습니다. 그런데 state를 이용하여 데이터바인딩을 할 때 주의할 점이 하나 있습니다. 바로 부모 컴포넌트의 state는 바로 자식 컴포넌트에서 사용할 수 없다는 것입니다. 부모 컴포넌트와 자식 컴포넌트의 관계는 다음과 같습니다. 쉽게 말해서 큰 컴포넌트 안에 작은 컴포넌트를 집어넣으면 부모-자식 관계가 되는 것입니다. 이런 관계에서 자식 컴포넌트가 부모 컴포넌트의 state를 사용하기 위해서는 props를 이용해야합니다. ⭐️ props 사용법 props를 사용하기 위해서는 어떻게 해야될까요. 이것을 공부하기 위해 간단한 예제 코드를 보겠..

리액트에서도 반복문을 사용할 수 가 있습니다. 다만 일반적으로 반복문을 만들 때 사용하는 for는 사용할 수 없습니다. JSX { } 중괄호 안에서 for를 사용할 수 없기 때문입니다. 이를 극복하기 위해서 map 함수를 사용합니다. function App() { let [title, setTitle] = useState(['강남 우동 맛집', '강남 햄버거 맛집', '수원 갈비 맛집']); return ( ... { title.map( ()=>{ return ( { title[0] } 1월 20일 ) }) } ) }; map을 사용할 때도 중괄호 안에 넣어준 상태에서 해줘야 합니다. 위의 코드를 예시로 보면 현재 title이라는 state에는 자료를 세 개 가진 array가 들어가 있습니다. 따라서 반..

리액트에는 Component 라는 개념이 있습니다. 복잡한 HTML(JSX)을 간단하게 한 단어로 치환해서 사용하는 개념입니다. 이에 대해 공부해보겠습니다. function App() { return ( Title Date Content ) } modal이라는 UI를 만들기 위해 JSX를 작성했습니다. 그런데 이렇게 만드는 것은 조금 비효율적입니다. 쓸 때마다 저 코드를 반복해서 적어야 하므로 코드가 길어지기 때문입니다. 이를 보완하기 위해 컴포넌트를 사용해보겠습니다. function App() { return ( ) } function Modal() { return ( Title Date Content ) } 컴포넌트는 함수 형식으로 만듭니다. 그리고 return ( ) 소괄호 안에 자신이 적고 싶은 ..

리액트에서 state를 변경하는 방법에 대해서 공부해보겠습니다. 리액트에서 state를 변경할 때는 useState를 통해 데이터를 담을 때 같이 생성되는 변경에 사용되는 함수를 이용하면 됩니다. let [a, b] = useState('저장할 데이터'); a에는 저장할 데이터가 담기고 b에는 저장할 데이터를 변경하는 함수가 담긴다고 했습니다. state를 변경할 때는 b를 활용하면 됩니다. let [a, b] = useState(0); { b(a+1) } }>증가 { a } useState함수를 이용해서 초기 state에 0을 넣었습니다. 그리고 버튼을 클릭할 때마다 이 숫자가 하나씩 커지게 하고 싶습니다. HTML에서 이벤트리스너를 주듯이 JSX에서도 사용할 수 있습니다. 다만 onclick이 아니라..

리액트에서는 데이터를 저장하는 방법으로 변수 외에 또 다른 방법이 하나 더 있습니다. state 라는 것인데요 이에 대해 공부해보겠습니다. 1️⃣ state 사용하는 방법 import React, { useState } from 'react'; App.js 파일 최상단에 있는 코드에 { useState } 라는 것을 추가해줍니다. 리액트 내장함수인 useState를 사용하겠다는 뜻입니다. 그러면 이제 useState함수를 사용할 수 있습니다. 사용방법: useState('넣고 싶은 데이터') 이렇게 useState 함수를 사용하면 그 자리에 두 개가 남습니다. Array 형식으로 남게 됩니다. 그래서 state를 변수에 할당할 때 보통 구조분해 할당 문법을 이용하여 저장합니다. let [a, b] = u..

리액트 프로젝트에서는 메인으로 작업하는 페이지가 App.js 파일입니다. 이 파일에서 HTML도 작성할 수 있습니다. function App() { return ( ) } return 뒤에 오는 소괄호 안에 HTML을 바로 작성해주면 됩니다. 그런데 사실 이 안에 작성되는 엄밀히 말해서 HTML이 아닙니다. 여기에 사용되는 문법을 JSX 문법이라고 합니다. 생긴 건 HTML과 비슷하지만 문법이 조금씩 다릅니다. 왜냐하면 JSX가 쓰이는 파일이 App.js 파일, 즉 자바스크립트 문법이기 때문입니다. 그렇지만 HTML 파일을 작성할 때와 거의 비슷하기는 합니다. 다만 좀 차이가 나는 지점이 있는데요. 차이가 나는 지점 위주로 공부해보겠습니다. 1️⃣ div에 class를 주고 싶을 때 div에 클래스를 주..