sohyeon kim

💡 데이터의 불변성에 대해 알아보자 원시 데이터 : 숫자, 문자, 불리언.. 원시 데이터들은 같은 값을 저장하면 그 값의 같은 주소를 적어둔다. number1 = @111 ➡️ @111 = 1 number2 = @111 ➡️ @111 = 1 참조형 데이터 : 배열, 객체, 함수.. 참조형 데이터들은 같은 값을 저장해도 각각의 다른 주소를 적어둔다. 그리고 그 주소들은 같은 값을 바라보는 같은 주소에 다시 연결된다. obj1 = @222 ➡️ @222 = @333 ➡️ @333 = name: 1 obj2 = @777 ➡️ @777 = @333 ➡️ @333 = name: 1 💡 데이터를 수정해보자 원시 데이터는 값이 바뀌면 바로 연결된 주소를 바꾼다. number1 = @444 ➡️ @444 = 2 num..

state 잘 쓰는 그날까지.. 🥲 💡 카운트를 세보자 import { useState } from "react"; function App() { const [count, setCount] = useState(0); const countFunction = () => { setCount(count + 1); }; return ( {count} Click ); } export default App; setCount 의 초기값을 0 으로 설정하고, 버튼 클릭 시 count 에 + 1 한 값을 set 해준다. ❗️리액트는 state 가 바뀌어야 화면을 다시 렌더링 한다. count 가 아니라 setCount 를 바꿔야 한다!!! count 아무리 바꿔도 안되고 🎀 setCount 🎀를 바꿔야 한다!!! 💡 이름..

헷갈리는 props ..🥵 💡 props : 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 값들 💡 children : 부모 컴포넌트 내에서 자식 태그로 감싼 모든 값들 function User({ children }) { return {children}; } function Layout({ children }) { return ( title~~ {children} ); } function App() { return ( 안녕하세요 {/*children : 부모인 App 내에서 자식 User 로 감싼 안녕하세요*/} content, content, content {/*children : 부모인 App 내에서 자식 Layout 으로 감싼 content..*/} ); } export default App; A..

내배캠 리액트 입문 수업 중.. 내용 정리! 리스트를 추가 하고 삭제해보자 ~ 👩‍💻 전체 코드 📁 App.jsx import React, { useState } from "react"; import "App.css"; import AddButton from "components/AddButton"; import User from "components/User"; function App() { const [users, setUsers] = useState([ {/*기존 리스트*/} { id: 1, age: 11, name: "요리" }, { id: 2, age: 12, name: "미나토" }, { id: 3, age: 34, name: "호리" }, { id: 4, age: 40, name: "사오리"..

🤤 리액트로 리스트를 만들어보자~ html 작성법과 같이 ul 과 li 로 작성! class 는 className 으로 쓴다. import React from "react"; import "App.css"; function App() { return ( 감자 고구마 당근 가지 애호박 ); } export default App; .ul-style { margin: 0; padding: 20px; list-style: none; display: flex; justify-content: space-between; } .li-style { width: 100px; height: 100px; border: 1px solid red; border-radius: 10px; display: flex; justify-c..

💡 props 는 반드시 위에서 아래 방향으로 흐른다. 부모 ➡️ 자식 (단방향) 💡 props 는 반드시 읽기 전용으로 취급하며, 변경하지 않는다! import React from "react"; function Son() { return 나는 아들이야!; } function Mom() { const name ="사모님"; return ; } function Grandfa() { return ; } export default function App() { return ; } Mom 의 name 을 Son 에서 쓰고 싶다면? props 로 값을 전달한다! import React from "react"; function Son(props) { console.log(props); // {motherName:..

💡 다른 파일을 import 해서 가져올 때 경로를 ../ 이런 식(상대 경로)으로 들어가지 않고 그 파일의 이름으로 바로 불러올 수 있도록 절대 경로를 설정할 수 있다! 이렇게 ~ 방법은 1. 먼저, 최상위 폴더(root 경로)에 jsconfig.json 파일을 만들어준다. 2. 그리고 파일 안에 아래와 같이 작성 src 폴더 내 파일들은 절대 경로로 작성할 수 있게 된다! 3. 수정할 파일로 들어가 절대 경로로 파일명 수정! 4. 그럼 에러가 발생하는데 다시 npm start 를 해주면 정상적으로 작동된다. ✳️ 이런 식으로 파일을 불러오는게 필수적인 건 아니니 때에 취사선택해 사용하자.