본문 바로가기

전체 글291

js파일에서 리액트 컴포넌트 만들기 리액트 컴포넌트를 만들어보자. 1. Hello.js파일 생성 2. import React from 'react'; 를 상단에 써주기 3. export default Hello; 를 하단에 써주기 4. function Hello(){ return Hello } Hello 를 가지는 컴포넌트를 만들었다! 2020. 7. 3.
App.js에서 다른 js파일의 react 컴포넌트 가져오기 디렉토리 구조가 다음과 같다고 가정한다. root ㄴ Hello.js ㄴ App.js Hello.js 파일에 Hello 컴포넌트가 선언되어 있다. App.js 파일에 function App(){} 코드가 존재하고 App{} 내부에서 Hello 컴포넌트를 가져오려면 어떻게 코드를 써야할까? 1. 우선 Hello.js 에서 Hello 컴포넌트를 export 시킨다. (참고로, export default 키워드를 사용하면 `import Hello from ~` 형태로 사용 가능하다.) // Hello.js function Hello(){ return Hello } export default Hello; // 또는 export Hello; 2. export 한 것을 가져와서 쓰려면 App.js에서 import .. 2020. 7. 3.
JSX babeljs.io에 접속하여 try it out을 누른후 왼쪽에 다음과 같은 코드를 입력하면 오른쪽의 코드들이 나타난다. 왼쪽에 적은 코드를 JSX라고 한다. JSX 규칙에 따라 작성된 코드들은 babel이라는 도구를 이용해 자바스크립트 문법으로 변환된다. 쉽게 생각하면 리액트를 사용하면서 JSX를 사용하게 되고 이는 결국 자바스크립트문법으로 변환된다는 것을 인지하고 있으면 된다. 어떻게 변환이 되고 하는 구체적인 내용들을 사용이 익숙해지고 나서 찾아보면 될 것이다. JSX는 리액트를 사용할 때 컴포넌트의 생김새를 정의할 때 사용된다. JSX를 사용하는 규칙은 다음과 같다. 1. 닫는 태그가 항상 있어야한다. JSX를 사용할 때 br태그를 사용하려면 처럼 닫는 태그를 작성해야 한다. 2. 하위 요소에 .. 2020. 7. 3.
hello world react로 hello world 해보자. 준비 작업 1. node js 설치 2. yarn 설치 설치가 완료되면 다음 작업 진행 1. 작업할 폴더 만들고 폴더 안으로 이동 (윈도우는 cmd, 맥은 터미널에서) 2. npx create-react-app begin-react 3. cd begin-react 4. yarn start react가 뺑글뺑글 도는 화면이 나타나면 끝! 2020. 7. 3.

티스토리툴바