const [articles, setArticles] = useState([])이 코드는 React의 useState 훅을 사용하여 함수형 컴포넌트에서 상태를 관리하는 부분입니다. useState 훅은 React 함수형 컴포넌트에서 상태를 추가할 수 있게 해주는 함수이다.
여기서 [articles, setArticles]는 배열 구조 분해(destructuring)를 사용하여 useState의 반환 값을 articles와 setArticles로 분리하고 있다.
articles: 상태의 현재 값을 나타내는 변수이다. 초기값은 []로 빈 배열이다. 이 배열은 게시물 목록을 저장하게 된다.
setArticles: 상태를 업데이트하는 함수이다. 이 함수를 호출하여 articles 상태를 업데이트할 수 있다. React는 setArticles를 호출하면 컴포넌트를 리렌더링하고 새로운 상태를 적용한다.
useEffect(() => { fetchArticle() }, [])는 컴포넌트가 처음 렌더링될 때(fetchArticle 함수가 호출될 때) 한 번만 실행되도록 설정되어 있다. 빈 배열 []은 의존성 배열로써 아무 의존성도 없음을 의미하므로, 컴포넌트가 처음 렌더링될 때만 fetchArticle 함수가 실행된다.
fetch는 JavaScript에서 네트워크 요청을 보내는 함수이다. 이를 통해 서버로부터 데이터를 가져오거나 서버에 데이터를 전송할 수 있다. fetch 함수는 Promise를 반환하며, 비동기적으로 네트워크 요청을 수행한다.
기본적으로 fetch 함수는 HTTP 요청을 보내는 데 사용된다. 주어진 URL에 GET 요청을 보내거나, 다른 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 원하는 동작을 수행할 수 있다. 이때 요청에 대한 응답을 받으면 Promise가 이행된다.
예를 들어, 다음은 fetch 함수를 사용하여 GET 요청을 보내고, 해당 요청에 대한 응답을 JSON 형식으로 파싱하는 예제이다.
javascript
Copy code
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));위의 코드에서:
첫 번째 .then에서는 fetch 함수가 반환한 Promise가 성공할 경우 응답(response)을 JSON 형식으로 파싱한다.
두 번째 .then에서는 JSON으로 파싱된 데이터(data)를 콘솔에 출력한다.
.catch에서는 네트워크 요청에 실패한 경우 발생하는 오류를 처리한다.
fetch 함수를 사용하여 서버로부터 데이터를 가져오는 것 외에도, HTTP POST 요청을 보내거나 요청 헤더를 설정하는 등의 다양한 작업을 수행할 수 있다. 이를 통해 웹 애플리케이션에서 서버와의 통신을 담당할 수 있다.
const handleChange = (e) => {
const { name, value } = e.target;
setArticle({ ...article, [name]: value });
console.log({ ...article, [name]: value })
}이 코드는 사용자의 입력에 따라 게시물(form)의 상태를 업데이트하는 handleChange 함수를 정의하는 부분이다.
handleChange 함수는 이벤트 객체 e를 매개변수로 받는다. 이 이벤트 객체는 input 요소에서 발생한 이벤트에 대한 정보를 포함하고 있다.
const { name, value } = e.target;: 이벤트 객체의 target 속성은 이벤트를 발생시킨 HTML 요소를 가리킨다.
여기서는 input 요소가 이벤트를 발생시킨 것이므로, 해당 input 요소에 대한 정보를 얻을 수 있다.
이 때, input 요소의 name 속성은 입력 필드의 이름을, value 속성은 입력 필드에 입력된 값을 나타낸다. 이를 구조 분해(destructuring)를 사용하여 각각 name과 value 변수에 할당한다.
setArticle({ ...article, [name]: value });: 이전에 정의된 article 상태를 업데이트한다.
spread 연산자 ...를 사용하여 기존 article 상태를 복사하고, [name]: value 형식으로 새로운 속성을 추가한다.
이렇게 함으로써 입력 필드의 이름(name)에 해당하는 키의 값을 입력된 값(value)으로 업데이트한다.
이때, React의 useState 훅에서 제공하는 setArticle 함수를 사용하여 상태를 업데이트합니다.
console.log({ ...article, [name]: value }): 업데이트된 article 상태를 콘솔에 출력합니다.
이때, 업데이트된 상태를 콘솔에 출력하기 위해 마찬가지로 spread 연산자와 계산된 속성 이름을 사용한다.
이렇게 하면 사용자가 입력 필드에 값을 입력할 때마다 article 상태가 업데이트되고, 해당 내용이 콘솔에 출력된다.
이후에는 이 업데이트된 상태가 UI에 반영되어 사용자에게 보여질 것이다.
