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

리액트 프로젝트를 시작하기위해 리액트 프로젝트를 생성해보자. (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로 만든 자바스크립트 라이브러리라서 브라우저의 자바스크립트를 이용해 웹페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트 한다. 자바스크립트로 그게 가능한 이유는 웹사이트의 백그라운드에서 실행되며 로딩이 완료된 페이지를 읽고 조작할 수 있기 때문이다. 더보기 물론 알고 있겠지만 라이브러리랑 프..

자바스크립트 스프레드 연산자를 리액트에서 왜 사용할까? 리액트에서 중요한 "State (상태)"와 관련있다. 리액트에서 상태가 Array(배열)이나 Object(객체)라면, 스프레드 연산자를 통해 업데이트를 해야한다. 왜냐하면 Array(배열)나 Object(객체)는 레퍼런스타입이기 때문에 배열요소를 수정해도 주소값이 변경되지 않는다. 따라서 Spread Operator를 사용하게 되면 새로운 배열 또는 새로운 객체가 생성이 되어 "새로운 주소값"을 갖게된다. return { ...prevInput, // 현재 상태를 새로운 객체로 만드는것 [input]: +value, // input변수에 담긴 문자열로 키를 만든다. }; 결론 : 새 주소값으로 기존데이터를 유지하고 새 데이터를 만든다.

스프레드 연산자에 대해 쉽게 알아보자. 스프레드 연산자(Spread Operator)는 이름이 거창하지만, " . . . " 를사용한다. 쉽게 " . . . " 를 사용한다는것은 "요소를 펼쳐 놓겠다" 란 의미로 이해해보자. 이말은 배열이나 객체의 모든 요소를 개별적으로 분리하여 사용할 수 있게 해주겠다란 말이다. [ ] 배열에서의 스프레드 연산자 사용 배열에서 스프레드(...)를 사용하면 기존 배열에 새로운 요소를 추가하여 새로운 배열을 만들어준다. 이해하기 const oldArray = [1, 2, 3]; // 기존 배열 const newElement = 4; // 추가하고 싶은 새 요소 const newArray = [...oldArray, newElement]; // newArray의 값은 : '..