REACT(4)
-
[리액트] Props; 컴포넌트 간 정보 주고받기
부모 → 자식 컴포넌트 정보 전달 각 props(properties)에 대한 value을 통해 정보를 넘겨줄 수 있다.. 자식 컴포넌트에서 받은 정보 사용 자식 컴포넌트의 인자로 props(properties)을 하나의 객체로 받는다. 자식 컴포넌트에서 props 객체의 각 value; 속성에 접근하여 소스코드에 활용한다.[★] 예) prop 객체: name, emotion // props 객체의 각 value: "Yeonju", "happy" (방법1) //src/components/HowRu.js function HowRU(props){ return {props.name} is {props.emotion}. } //src/App.js function App(){ return ( ); } (방법2) /..
2020.05.24 -
[리액트] JSX
JSX란? HTML과 유사하게 하게 생겼지만 JavaScript 언어의 확장된 문법이다. 리액트 프로젝트에서 겉으로 보이는 부분을 정의할 때 사용한다. 리액트 프레임워크에서 특화된 개념이다. 컴파일에 최적화되어 있다. Babel이 컴포넌트 파일 안에 있는 XML 형태인 JSX를 Javascript로 변환해준다. JSX 파일은 컴파일이 되기 때문에 변환과정에서 오류가 있을 경우에 빌드할 때 오류가 발생한다. JSX -----[Babel]----> Javascript //src/App.js function App() { return ( Edit src/App.js and save to reload. Learn React ); } JSX 기본 문법 꼭 닫혀야 하는 태그 /div> 꼭 감싸져야하는 태그 2개 이..
2020.05.24