Front-end12 리액트 컴포넌트 (2) 그럼 내가 방금 만든 Post 컴포넌트를 여러개로 추가 하고 싶다면? 최상위 컴포넌트 밑에 재사용을 하면 된다! 왜냐하면 JSX 코드는 항상 최상위 컴포넌트가 하나만 있어야 하기 때문이다. 이처럼 Post 컴포넌트를 여러개 쓰기 위해 맨 위에 이라는 최상위 컴포넌트를 하나 추가 하였다. 다시 한 번 말하지만 컴포넌트를 재사용하기 위해선 맨 위에 이를 감싸는 최상위 컴포넌트가 무조건 필요하다! return은 단 하나의 요소만 반환할 수 있기 때문이다. 2023. 12. 26. 리액트 컴포넌트 (1) 리액트 컴포넌트를 만들때 주의 해야할 것! 1. 함수 이름을 대문자로 시작하기 2. 함수에서 JSX 코드 반환하기 우선 이 두가지를 미리 설명하고 시작하겠다. 처음 생성해둔 App.jsx 외에 src 밑에 components 라는 폴더를 생성하여 그 밑에 Post.jsx 라는 파일을 추가했다. 왜 App.jsx도 컴포넌트인데 폴더 안에 안 넣었는지는 그 밑에 차근차근 설명 하겠다. Post.jsx 안에 간단한 HTML코드를 작성 하였다. 이걸 쓴다고해서 출력 화면엔 이게 나오진 않는다 그럼 나오게 설정하려면 어떻게 하면 될까? 답은 main.jsx 파일을 보면 알 수 있다. 우리는 main.jsx 안에 컴포넌트만 생성 해놨기 때문에 출력화면에는 APP 컴포넌트 만 출력 될 것이다. 이때 App 컴포넌트를.. 2023. 12. 26. React 파일 생성 후 탐색하기... 리액트를 이용해서 파일을 생성했더니 파일 확장자가 App.jsx와 main.jsx 등 js가 아닌 jsx로 써있었다. jsx는 쉽게 얘기해서 HTML코드를 자바스크립트에 포함시킨 것이다. 코드들은 브라우저가 지원하지 않고 내부적으로 변환이 필요하다! css 파일 또한 자바스크립트 파일로 import 되있는 코드가 있기에 프로젝트가 알아서 내부적으로 변환을 해준다. 더 자세히 살펴보자면 이 main.jsx 파일을 보면 React, ReactDOM에서 각각 'react', 'react-dom/client'를 import 하는데 이 라이브러리는 package.json 파일을 보면 알 수 있다. Node.js가 이 package.json 파일을 이용한다. (프로젝트의 의존성 관리) 그리고 다시 main.jsx .. 2023. 12. 26. React.js vs Vanilla.js 사람들은 리액트를 무조건 써야지!!!! 하지만 왜 써야하는지는 정작 물어보면 잘 알지 못한다. 나도 그랬었다. 그래서 오늘 알아볼 것은 React.js와 Vanilla.js의 차이가 뭔지 비교하면서 왜 React를 써야하는가에 대해서 알아 볼 것이다. 우선 한 줄로 리액트를 말하자면 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다. 근데 이렇다고 해서 왜 리액트를 쓰는가에는 답을 주진 못한다. 대표적으로 리액트를 쓰는 사이트를 보면 넷플릭스 같은 곳이 있다. 넷플릭스는 화면 전환이 매우 부드럽고 페이지를 로딩하는 것 같지 않고 빠르게 화면 전환이 되는걸 알 수 있다. 그 이유는 리액트는 SPA(Single Page Application)이기 때문이다. 말 그대로 하나의 페이지로 만든 어플이기 때.. 2023. 12. 26. 이전 1 2 3 다음
