$$config title: [제작] 앱구현 - 목록 및 내용 화면에 출력 방법 keywords: - flex $$ # [제작] 앱구현 - 목록 및 내용 화면에 출력 방법 Δ TIP [ 리액트에서 데이터가 뒤늦게 로딩되면 생길 수 있는 문제 해결방법 - 9강 ](https://slog.gg/p/6215) 해결방법 1 : 먼저 리턴을 해서, 아래 코드가 실행이 안되게 하는 방법 ▷ if ( wiseSaying == null ) return <>Loading.. 해결방법 2 : ?를 사용하는 방법 ▷ return <>{wiseSaying?.id} : {wiseSaying?.content} ## 할일 목록 Δ codepen [flex] 1 . css에서 아래와 같이 flex를 설정하여 js에서도 flex설정을 할 수 있도록한다. , 해당 설정을 통해 root의 아이템을 다루겠다. ```css #root { 1) display : flex; 2) flex-direction : column; } ``` 1) root의 자식(js)은 flex의 아이템을 다루겠다. 2) 위에서 아래로 배열하겠다. 2 . flex 별 의미 * flex-1 : 최대화 Δ codepen [js] ```js 1. const userCode = "localhost"; function App() { 2. const [todos, setTodos] = useState([]); 3. useEffect(async () => { const data = await fetch(`http://localhost:3000/${userCode}/todos`); const dataJson = await data.json(); setTodos(dataJson.data); }, []); return ( <>

- flex관련

--------------------- 4.

{todo.no} : {todo.content}

---------------------

); } ``` 1 . userCode를 "localhost"라고 지정한다. 2 . DB에 있는 값을 끌어오기 위해 state 변수를 생성한다. 3 . fetch를 이용 - 해당 fetch를 이용할 경우 한번만 실행했는데 연속으로 실행을 하는 오류가 있을 수 있다. 이러한 오류를 방지하기 위해 useEffect문을 사용한다. - async ~ await은 await이 안붙은 코드가 실행될때 시작하고 바로 다른것을 먼저 진행하면서 해당코드의 내용이 늦게 출력되는 상황이 방지하기 위해 await이 붙은 코드의 경우 코드가 끝날때까지 기다렸다가 다음 코드를 실행한다. - localhost~에 있는 값을 data에 넣고, 넣어진 data의 json값을 새로운 변수에 넣는다. - todos가 실행되면 dataJson에 있는 data가 실행이 된다는 뜻 4 . 목록, map - map을 통해 목록 형식으로 DB 데이터를 가져온다. ## 할일 작성 ```js ...+ 3-2 const reloadList = async () => { const data = await fetch(`http://localhost:3000/${userCode}/todos`); const dataJson = await data.json(); setTodos(dataJson.data); }; 3-2. useEffect(reloadList, []); 2. const addTodo = async () => { await fetch(`http://localhost:3000/${userCode}/todos`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ perform_date: "2022-12-12 12:12:12", content: "운동하기" }) }); 3-1. await reloadList(); }; return ( ...+ 1. ...+ ); } ``` 1 . 작성이라는 버튼을 클릭하여 "addTodo" 실행한다. 2 - addTodo를 실행하면 fetch가 실행 - fetch가 실행하면서 값을 DB에게 날려보내야함 - DB에게 날릴 값에 조건이 붙는다 - [fetch 옵션](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch)은 따로 사이트를 이용하는 것이 좋다 - 옵션 * 'method : ~' 는 'POST'타입으로 된것과 통신한다. * 'headers ~'는 내가 보내려고 하는 데이터 코드는 json형태로 보낼거야라는 의미 * 'body : ~' 는 데이터를 암호화 하는것으로 body안에 보낼 데이터를 입력하면 된다. 3 - addTodo 함수에 막바지에 있는 reloadList를 실행 - 본래 useEffect로 감싸여 있던 익명함수에 이름(reloadList)을 부여함으로 useEffect를 따로 빼둔다. - fetch(todos의 json값을 가져온다)문 실행 - await을 잘 사용하자. 4 . 작성을 누르면 1번~3번이 실행되고 입력된 값은 VS코드로 이동한다. 5 . VS코드에 있는 app.post가 실행됨