코딩65 리액트 입문(State) State란 무엇인가? state를 쓰는 목적은 UI를 바꾸기 위함이다. State를 만들 때는 useState()를 사용한다. state란 컴포넌트안에서 변할 수 있는 값이다. # useState 훅을 사용하는 방식 const [ value, setValue ] = useState( 초기값 ) 먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 state의 이름, 그리고 두번째 자리에는 set 을 붙이고 state의 이름을 붙인다. 그리고 useState( ) 의 인자에는 이 state의 원하는 처음값(initial state, 언제든지 변할 수 있는 값)을 넣어준다. import React, { useState } from 'react' function App().. 2023. 4. 14. 리액트 입문(Props 추출) import React from 'react' import Child from 'Child' function App() { const name = 'test' return 이름 } export default App App.js에서 Child 컴포넌트로 age, name, 이름(children) 으로 보내줬다. import React from 'react' function Child({age, name, children}) { console.log(age) console.log(name) console.log(children) return ( Child ) } // Child.defaultProps={ // age : '기본 나이' // } export default Child Child 컴포넌트에서 받은.. 2023. 4. 14. 리액트 입문(Props Children) children이란? 자식 컴포넌트로 정보를 전달하는 또 다른 방법이다. childern도 props라고 생각하면 된다. // src/App.js import React from "react"; function User() { return ; } function App() { return 안녕하세요; } export default App; children으로 props를 보내는 방식은 위와 같다. 안녕하세요 형태로 보내고 있는데 이렇게 props를 보내던 방식과는 조금 다르다. function User(props) { console.log(props) return ; } function App() { return 안녕하세요; } 정보를 받는 방식은 기존과 동일하나 이름이 children으로 고정되어 있다.. 2023. 4. 14. 리액트 입문(Props의 개요) props란 컴포넌트 끼리의 정보교환 방식! 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터로, 컴포넌트 간의 정보 교류 방법이다. props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향). props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. import React from "react"; // div안에서 { } 를 쓰고 props.motherName을 넣어보세요. function Child(props) { return {props.motherName}; } function Mother() { const name = "홍부인"; return ; } function GrandFather() { return ; } function App() { re.. 2023. 4. 14. 이전 1 ··· 7 8 9 10 11 12 13 ··· 17 다음
