본문 바로가기

전체 글66

리액트 상태(state) 자 이제 컴포넌트에 대해 알아봤으니까 그 다음 아주 중요한 핵심인 state에 대해 알아보자! 기본 개념을 우선 말하고 가자면 웹 사이트가 어떤 상태에 있을 수 있는데 그 상태가 여러 개 있을 수 있다. 웹 사이트가 동적이라면 상태라는 게 많이 존재할 것이다. 만약에 글쓰기 칸에 내가 글을 쓰는 순간 어플리케이션의 상태가 바뀌게 되는 것이다. 그렇게 상태가 바뀌면 리액트는 UI를 변경해준다. 지금부터 예를 들어 작성자는 textarea를 생성해서 그 칸 안에 작성을 함에 따라 밑에 똑같이 적히게 UI를 변경해주는 작업을 하여 state에 대해 알아 보겠다. 먼저 textarea를 생성하기 위해 새로운 NewPost.jsx 파일을 생성 했다. 여기서 하나 짚고 넘어가면 왜 for이 아닌 htmlFor이냐면.. 2024. 1. 4.
리액트 컴포넌트 (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.

티스토리툴바