리액트 슈퍼루키 동동이 리액트 슈퍼루키 동동이

리액트 프로젝트를 시작하기위해 리액트 프로젝트를 생성해보자. (mac에서 리액트 프로젝트 생성하기) 데스크탑 (바탕화면)에 만들어 주고 싶다면 아래와 같이 따라하면된다. 1. iTerm를 열거나 손에 익은 혹은 편한 터미널을 열어준다. 2. 명령어 작성 : cd Desktop Desktop 대신 원하는 파일에 위치해도된다. 3. npx create-react-app "프로젝트명" test-app이라는 프로젝트 명으로 리액트 프로젝트 생성하기 : npx create-react-app test-app 4. Visual Studio Code (비주얼 스튜디오 코드)를 사용하고 있다면, code . 명령어로 오픈해주면 편하다. cd test-app code . *한칸 띄어쓰고 "." 찍기 5. 내가 만든 tes..

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 오류에 대해 알아보자. 작업하다가 컴파일 에러로 이런화면 많이 보았을것이다. 이런 에러들을 마주하게 되었다면, 이에러는 리액트 컴포넌트 return 문안에서 루트 태그가 하나가 아니기 때문에 발생한 에러라고 보면된다. 지난 JSX 포스트 글에 올린 내용과 같이, JavaScript에서 함수는 단일 값만 반환한다. 즉, 한개만 리턴한다는 말이다. 이 특성을 JSX와 React컴포넌트에서도 그대로 적용되기 때문에 루트 JSX도 단일 요소 하나만 있어야한다. 문제 예시 코드 : IDE에서 물론 경고를 주기에 실수를 안하겠..

JSX? JSX는 JavaScript XML의 약자이다. JSX코드는 자바스크립트 파일에 작성된 HTML 코드를 의미한다. 쉽게 풀어보면, JSX = JavaScript XML = 자바스크립트 안에 있는 HTML(XML)코드이다. 리액트는 빌드 프로세스를 사용하는데 처리되지 않은 리액트 코드는 브라우저에서 실행 할 수 없다. 그래서 리액트 코드는 특별한 JSX 기능을 사용하여 작업한다. 리액트는 JSX 코드를 실제 DOM으로 렌더링한다. JSX 코드에 자바스크립트 표현식도 쓸 수있다. = { } 사용이 가능하다. JSX의 한계 JavaScript에서 함수는 단일 값만 반환한다. ( 한개만 리턴한다는 말이다.) 이 특성을 JSX와 React컴포넌트에서도 그대로 적용되기 때문에 루트 JSX도 단일 요소 하나..

React.js (리액트)란 무엇인가? "사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다." 리액트는 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리이다. 즉, "사용자 인터페이스를 구축하기 위한 JavaScript(자바스크립트) 라이브러리" 이다. 리액트를 사용하여 만든 사이트중 대표적인 예로 넷플릭스를 꼽을 수가 있다. React.js는 이름에 힌트를 얻을 수 있듯 JavaScript로 만든 자바스크립트 라이브러리라서 브라우저의 자바스크립트를 이용해 웹페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트 한다. 자바스크립트로 그게 가능한 이유는 웹사이트의 백그라운드에서 실행되며 로딩이 완료된 페이지를 읽고 조작할 수 있기 때문이다. 더보기 물론 알고 있겠지만 라이브러리랑 프..