본문 바로가기

클론코딩2

[클론 코딩] 뉴스 api 연동 지난번에 전체적인 UI를 구상했습니다. 이제는 newsapi를 연동해서 본격적으로 완성시켜볼 차례입니다. 1. api 연동 컴포넌트가 렌더링 될 때마다 작업을 수행하는 useEffect를 통해 api를 연동할 예정입니다. 주의할 점은 이전에 api 연동을 위해 async로 useEffect에 콜백 함수를 등록할 때 여기에는 async를 붙이면 안된다는 점 입니다. 그 이유는 useEffect를 실행했을 때 뒷정리 함수를 반환하기 때문입니다. 그래서 지금처럼 useEffect에 비동기 처리가 필요하다면 내부에 함수를 하나 더 만들어서 async 키워드를 붙여서 이용해야 합니다. 2021.11.16 - [Programming/React] - [React] Hooks - useEffect [React] Hoo.. 2022. 1. 2.
[클론 코딩] TODO LIST 기능 구현 지난 포스트에서 기본세팅과 UI를 구성했습니다. 이제 껍질의 내용물들을 구현해보도록 하겠습니다. 1. todos 우리가 만드는 TODO 앱은 App.js에서 배열의 형태로 관리됩니다. 그러기 위해서 useState Hook를 이용해서 todo를 관리하고 이 todos배열을 TodoList 컴포넌트의 props로 전달해서 보여주게 됩니다. const App = () => { const [todos, setTodos] = useState([ { id: 1, text: 'TODO LIST 앱 완성하기', checked: true, }, { id: 2, text: '블로그 포스팅하기', checked: false, }, ]); return ( ); }; todos 배열을 뜯어보고 지나가자면, 배열안에는 각 항목.. 2021. 12. 21.
300x250