일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 내일배움캠프
- 리액트 페이지 이동
- 자바스크립트
- 파이썬 for
- REACT
- 파이썬 for in
- 타입스크립트
- useState
- 리액트
- 리액트 프로젝트
- 한글 공부 사이트
- 그리드 정렬
- js
- 리액트 팀 프로젝트
- 코딩테스트
- 파이썬 slice
- 파이썬 enumerate
- 타입스크립트 props
- Next 팀 프로젝트
- 내배캠 프로젝트
- 타입스크립트 리액트
- 프로그래머스
- React Hooks
- 내일배움캠프 프로젝트
- JavaScript
- 파이썬 list
- 파이썬 반복문
- 리액트 훅
- 내일배움캠프 최종 프로젝트
- typeScript
- Today
- Total
목록리액트 (19)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LgixL/btsDTwtq0K5/PkP2kJut3hIqHSHkC6nNNk/img.png)
💡 useRef : DOM 요소에 접근할 수 있도록 하는 훅 state 와 비슷하게 저장한다는 느낌. state : 리렌더링이 꼭 필요한 값을 다룰 때 사용, 렌더링이 일어나면 내부 변수들 초기화 (버튼이 눌리면 숫자가 올라가야할 때!) ref : 리렌더링을 발생시키지 않는 값을 저장할 때 사용, 내부 변수 초기화 XXX import { useRef, useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); const countRef = useRef(0); const style = { border: "1px solid black", margin: "10px", padding: "10..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/23L5t/btsDQ6hCTAg/FGuUN6KNYrT0vZwNNC5jxK/img.png)
💡 리액트 훅들에 알아보자 💡 useEffect : 렌더링 시 특정한 작업을 해야할 때 설정하는 훅 - 컴포넌트가 화면에 보여졌을 때 - 컴포넌트가 화면에서 사라졌을 때(return) import "./App.css"; import { useEffect } from "react"; function App() { useEffect(() => { console.log("hello"); {/*콘솔에 hello 출력*/} }); return useEffect; } export default App; 화면이 렌더링될 때 콘솔에 값이 출력된다. import "./App.css"; import { useEffect, useState } from "react"; function App() { const [value, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sHLIq/btsDW8LrKLX/FQAYxpPTtYp7WXPvmMk4Rk/img.png)
💡 useState 의 기존 업데이트와 함수형 업데이트의 차이를 알아보자 💡 기존 업데이트 import "./App.css"; import { useState } from "react"; function App() { const [number, setNumber] = useState(0); return ( Number State : {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }} > + ); } export default App; 기존 업데이트는 온클릭에 setNumber 를 세번 입력해도 숫자가 1 씩 오른다. ➡️ 마지막 setNumber 만 적용된다. (모아서 하나만 실행) 마지막 setNumber ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/L1vxt/btsDKRLW77J/aWkrFkXHVIg3iYbw3ezKl0/img.png)
[JS] 데이터의 불변성 : 원시 데이터, 참조형 데이터 💡 데이터의 불변성에 대해 알아보자 원시 데이터 : 숫자, 문자, 불리언.. 원시 데이터들은 같은 값을 저장하면 그 값의 같은 주소를 적어둔다. number1 = @111 ➡️ @111 = 1 number2 = @111 ➡️ @111 = 1 참 aotoyae.tistory.com 데이터 불변성 때문에 생기는 문제..! import { useState } from "react"; function App() { const [obj, setObj] = useState({ name: "미나토", age: 20, }); const reName = () => { obj.name = "요리"; setObj(obj); {/*setObj 에 새 값을 할당*/} c..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c3x4cK/btsDQThMpn5/t56IcQpq0pmDJZ0JFecTF1/img.png)
💡 데이터의 불변성에 대해 알아보자 원시 데이터 : 숫자, 문자, 불리언.. 원시 데이터들은 같은 값을 저장하면 그 값의 같은 주소를 적어둔다. 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pt6qU/btsDT5oebty/EXMTQeZje9EBls6atyfL81/img.png)
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 🎀를 바꿔야 한다!!! 💡 이름..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CJcpg/btsDLqOc9sU/h8ikYgez6pmLPmNvWo6BMK/img.png)
헷갈리는 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/3HElW/btsDHtjBWtG/YsWkWI0DFWiPAnb60Aax7k/img.gif)
내배캠 리액트 입문 수업 중.. 내용 정리! 리스트를 추가 하고 삭제해보자 ~ 👩💻 전체 코드 📁 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: "사오리"..