코딩/React42 리액트 입문(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. 리액트 입문 JSX(JavaScript + XML) HTML을 품은 JS ⇒ JSX JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 안녕하세요! 시작이 반이다! 그래서 나온 게 JSX이다. 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다. const start_half = 안녕하세요! 시작이 반이다! ; # JSX에서 style 주는 법 // 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요! // 이렇게 쓰거나, orange //혹은 .. 2023. 4. 14. 이전 1 ··· 7 8 9 10 11 다음
