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

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도 단일 요소 하나..