Script

State란? State란 컴포넌트 내부에서 바뀔수 있는 값을 의미한다. 예를 들어 const name = "홍부인" 이고, name이라는 값이 바뀌어야만 하는 정보여야 한다면 state로 생성한다. State 만들기 State를 만들 때는 useState()를 사용한다. const [ value, setValue ] = useState( 초기값 ) 먼저 const로 선언을 하고 [ ] 빈 배열을 생성하고, 배열의 첫번째 자리에는 이 state의 이름, 두번째 자리에는 set을 붙이고 state의 이름을 붙인다. 그리고 useState( )의 인자에는 이 state의 원하는 처음값을 넣어준다. useState는 state를 만들어주는 리액트이 고유 기능이고 리액트에서는, 이러한 것을 기능이라고 칭하지않고..

보호되어 있는 글입니다.

1. 구조분해 할당과 Props 지금까지 우리는 이런식으로 props 값을 받아왔다. function Todo(props){ return {props.todo} } todo라는 props를 사용하는 모든 곳에서 props.를 붙여줘야만 했다. 이것을 조금 더 짧게 쓰는 방법이 있는데, 바로 자바스크립트의 구조 분해 할당을 이용하는 것이다. 구조분해 할당이 무엇인지는 아래 영상을 참고하자. https://www.youtube.com/watch?v=lV7ulA7R5Nk props는 object literal 형태의 데이터이다. 그래서 우리는 구조 분해 할당을 이용할 수 있다. 예시) 훨씬 간결해진 모습이다. function Todo({ title }){ return {title} } 만약 여러개의 props..

저번에 살펴본 props 방법과는 다른 방식의 props 방법을 살펴보자. 1.children 사용법 // src/App.js import React from "react"; function User(props) { return {props.children}; } function App() { return 안녕하세요; } export default App; 전에 살펴본 방식과는 다른 것을 알 수 있다. 이것이 children props를 보내는 방식이다. 이것이 children props를 받는 방식이다. 화면에는 안녕하세요가 출력된다. 2.용도 App.js // src/About.js import React from "react"; import Layout from "./component/Layout"..

1.Props란? props란 부모 컴포넌트로부터 받아온 데이터이다. // src/App.js import React from "react"; function Child(props){ console.log(props) // 이게 바로 props return 연결 성공 } function Mother() { const name = '홍부인'; return ; // "props로 name을 전달했다." } function GrandFather() { return ; } function App() { return ; } export default App; 2. props로 값 전달하기 컴포넌트 간의 정보를 교류할 때 Props를 사용한다. Mother 컴포넌트가 가지고 있는 값을 Child에게 넘겨 주고 있다..

1.JSX란? 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있다. 이렇게 함수로 만들어진 컴포넌트르 html 태그 사용하듯이 코드를 작성하는 이 방식을 JSX라고 한다. // import [패키지명] from [경로] 이 형식으로 불러와요. import React from 'react'; // js 파일 뿐 아니라 이미지도 가능가능! import logo from './logo.svg'; // css? 가능! import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 리액트에는 딱 하나의 html 파일만 존재한다.( publi..