Front-end/React9 리액트 컴포넌트 (3) 그럼 이제 컴포넌트를 실제적으로 활용하기 위해 알아가보자! 지금까지 만들어둔 Post 컴포넌트는 출력할때 두 가지중 하나만 출력하는데 실제로 사용할땐 데이터베이스에서 가져와 컴포넌트를 재사용하게 된다면 매번 다른 내용을 출력해야할 것이다. 각각의 컴포넌트가 독립적으로 동작하거나 보여지도록 만들기 위해서는 컴포넌트에 데이터를 전달할 수 있어야 한다. 이때 사용하는 것이 props이다. 동시에 PostsList라는 새로운 컴포넌트를 하나 생성했다. 지금 생성한 컴포넌트들의 연결성은 어떻게 되냐하면 PostsList라는 컴포넌트를 만들어 목록으로 뿌리고 그 목록에 Post의 내용이 나오게 생성하였다. 다른 것을 다 제쳐두고 딱 두 가지만 여기서 생각하기로 하자. 1. props 는 여러 곳에서 재사용하는데 각.. 2023. 12. 27. 리액트 컴포넌트 (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. 이전 1 2 3 다음
