https://devpost.tistory.com/98
TIL : 리액트와 인사하기 - 1
리액트에 대해서 무엇이라고 말하는가? 리액트 공식문서에 따르면 A JavaScript library for building user interfaces 입니다. 이말은 즉 리액트는 사용자가 보는 웹 또는 앱 화면을 구축하는데 사용되는 라
devpost.tistory.com
1. JSX
<React.Fragment> </React.Fragment> 태그
JSX로 이루어진 요소가 한개이상이라면 6 , 7 번째 줄 코드를 다음과 같이 묶어야합니다.

<Fragment>의 축약 표현입니다. 그리고 리액트는 return문안에서 반드시 하나의 최상위 태그만 존재합니다. 앞에서 말한것이 가능하게 도와주는 태그입니다.

데이터를 사용자 화면에 뿌려지게 도와주는 {} (증괄호)
App 컴포넌트와 return 사이에 선언된 변수를 사용자 화면에 보여지게 하려면 다음과 같이 {}(중괄호)를 이용하시죠

조건부 렌더링
중괄호에 다음과 같이 삼항 연산자를 이용해서 조건에 따라 ui가 달라지게 할수 있습니다.

컴포넌트도 가능할까요 => 네!!!!

map 과 filter
배열 데이터를 사용자 화면에 뿌려주고 싶다면 => map 을 이용합시다.

특정 데이터만 보여주고 싶다면..... filter을 사용하세여
예를 들어서 바둑이 포함된 데이터만 사용자 화면에 뿌려주고 싶다면

2. state
만약에 위에서 선언한 todo 데이터가 수정 , 삭제 될수 있는 값이라면 state로 관리하자. 이와 같이 state는 값이 변경의 여지가 있는 경우 사용하면 좋습니다.

setTodo를 이용해서 데이터 삽입해보기
import React, { useState } from 'react';
import './style.css';
export default function App() {
// 입력받을 값
const [content, setContent] = useState('');
// 할일목록 데이터
const [todo, setTodo] = useState([
{
id: 0,
content: '바둑 두기',
},
{
id: 1,
content: '강 주변 산책하기',
},
]);
const onSubmitButtonClick = (event) => {
event.preventDefault();
const obj = {
id: crypto.randomUUID(),
content,
};
// setTodo는 이전데이터 가지고 있음
setTodo((prev) => [...prev, obj]);
setContent('');
};
return (
<>
<form onSubmit={onSubmitButtonClick}>
<input
type="text"
value={content}
onChange={(event) => setContent(event.target.value)}
/>
<button type="submit">제출</button>
</form>
{todo.map((data) => (
<div key={data.id}>{data.content}</div>
))}
</>
);
}

그런데 이 데이터가 여기 뿐만 아니라 다른 곳에서도 쓰인다면 props를 사용하세요
function App(){
.....
// 이 데이터는 쓰이는 곳 컴포넌트에도 쓰임니다.
App 컴포넌트 데이터
<쓰이는 곳 data ={App 컴포넌트 데이터 } />
function 쓰이는 곳( props ){
....
const {data} = props;
....
return(
<>
{data}
</>
)
}
만약에 쓰이는 곳 컴포넌트가 저 멀리 있다면 , 위에서 아래로 내려가는 프롭스 드릴링 현상이 나옵니다.
1 깊이면 괜찮은데
5 ... 10 ..... 400 면 ㅠㅠㅠㅠ 입니다.
왜냐하면 여기서 에러가 발생하면 디버깅을 하기가 어렵습니다.
function App(){
.....
// 이 데이터는 쓰이는 곳 컴포넌트에도 쓰임니다.
App 컴포넌트 데이터
<쓰이는 곳 data ={App 컴포넌트 데이터 } />
function 데이터 전달만 하는 컴포넌트 (props) {
....
const {data} = props;
....
return(
<>
{data}
</>
)
}
데이터 전달만 하는 컴포넌트2 ....
데이터 전달만 하는 컴포넌트3.....
....
데이터가 필요한 컴포넌트 (props){
// 데이터 사용
}
컴포넌트
리액트에서 컴포넌트는 무엇일까요?
1. 다음과 같이 Profile이라는 컴포넌트를 정의합니다. => 자바스크립트 함수정의와 유사합니다.
2. Profile이라는 컴포넌트를 다시 사용할수 있습니다. => 재사용성
3. Profile이라는 컴포넌트를 2번처럼 선언만 해주어도 리액트가 알아서 그려주는것을 보실수 있습니다.
따라서 컴포넌트는 리액트에서 UI, 즉 사용자 인터페이스를 이루는 재사용이 가능한 조각입니다.

'TIL' 카테고리의 다른 글
오늘을 무엇을 하였나? (1) | 2024.03.18 |
---|---|
Github에 올린 내 작품 돌아보기 (0) | 2024.03.17 |
TIL : 리액트와 인사하기 - 1 (0) | 2024.03.16 |
TIL : 오늘 내가 발견한 것은 (0) | 2024.03.13 |
TIL : 오늘은 무엇을 배웠나? (0) | 2024.03.11 |