2024.01.26 TIL

 

함수형 setState

const filterByAge = (minAge) => {
	//기존
    // const filteredByAgeStudent = initialStudents.filter((item) => {
    //   return item.age >= minAge
    // })
    // setFilteredStudents(filteredByAgeStudent)

	//함수형
    setFilteredStudents((prev) => {
      return prev.filter((item) => item.age >= minAge)
    })
  };

 

함수형 setState를 사용하면 초기값을 받아오지 않고도 set에 들어있는 prev 데이터를 이용해서 데이터를 가공할 수 있다.

 

setState를 컴포넌트로 넘겨주기

function App() {
  const initialStudents = [
    { name: "Alice", age: 17, grade: "A" },
    { name: "Bob", age: 18, grade: "B" },
    { name: "Charlie", age: 16, grade: "C" },
    { name: "Diana", age: 19, grade: "D" },
  ];

  const [filteredStudents, setFilteredStudents] = useState(initialStudents);

  return (
    <div>
      <h1>학생 목록</h1>
           <FilterButtons initialStudents={initialStudents} setFilteredStudents={setFilteredStudents}
      />
      	<StudentList filteredStudents={filteredStudents} />
    </div>
  );
}

FilterButtons - filter 버튼들을 출력하는 컴포넌트

StudentList - 필터 된 데이터를 출력하는 컴포넌트

 

App.jsx에서 filteredStudents를 선언하고, FilterButtons에 setFilter만 넘겨주어도 FilterButtons 컴포넌트에서 filteredStudents의 값을 설정할 수 있다. 그렇기 때문에 FilterButtons에서 StudentList를 자식 컴포넌트로 불러와서 filteredStudents를 넘겨주는 것이 아니라, 최상위 컴포넌트에서 선언된 filteredStudents를 FilterButtons에서 필터된 데이터를 set하면, StudentList에서 그 값을 불러와서 가져다 쓸 수 있다.

 

REST API란?

REpresentational State Transfer의 약자로서, 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP Method(GET, POST, PUT, DELETE)를 사용하여 요청을 보내는 것.

URI를 통해 정보의 자원(Resource)을 표현하고, 자원의 행위는 HTTP Method로 명시한다.

ex) GET /users/3/profile

→ '유저 정보들 중 3번 아이디의 프로필을 가져와' 라고 예상할 수 있다.

// bad
GET /members/delete/1
// good
DELETE /members/1

// bad
GET /members/show/1
// good
GET /members/1

// bad
GET /members/insert/2
// good
POST /members/2

 

REST API 작성 규칙

<http://example.com/posts>     (O)
<http://example.com/posts/>    (X)
<http://example.com/post>      (X)
<http://example.com/get-posts> (X)
--> URI는 명사를 사용하고 소문자로 작성되어야 한다.
--> 명사는 복수형을 사용한다.
--> URI의 마지막에는 /를 포함하지 않는다.

<http://example.com/post-list>  (O)
<http://example.com/post_list>  (X)
--> URI에는 언더바가 아닌 하이픈을 사용한다.

<http://example.com/post/assets/example>  (O)
<http://example.com/post/assets/example.png>  (X)
--> URI에는 파일의 확장자를 표시하지 않는다.

 

RestFul하다?

REST API의 조건을 만족시킨 통신 설계 상태를 말한다.

누가 보더라도 이해하기 쉽고, 사용하기 쉬운 REST API라면 ‘RestFul’ 한것