React : TodoList 만들기 1탄 : 리스트 보여주기

📙 블로그를 작성하게 된 이유

 

React 공부를 하면서 기초가 가장 중요하다고 생각이 들어 코드가 익숙해지고 내가 구현할 수 있을때까지

계속 기초를 다질 예정으로 블로그를 작성한다 :)  TodoList는 구글이나 유튜브를 보며 찾아가면서 해볼수 있는 좋은 예시다.

TodoList는 어려우면 어려울수 있고 잘하는 사람은 쉽겠지만 생각보다 기초를 다지기가 좋은 개인 프로젝트이다.

혹여나 어려움을 겪는 프론트엔드 분들이 내 블로그를 보며 정보를 얻어갈 수 있으면 좋겠다. 

 

---

 <내가 보여줄 화면 >

🌈 TodoList 할일리스트를 작성해서 다한 할일은 체크해서 없애는 방식으로 구현을 할 것이다.

그중 목록을 만드는 작업부터 시작을 해볼 예정이다.

 

✅ 첫번째

리스트를 만들어 보자.

 

리액트인 만큼 해당 전체 리스트를 담을 state를 생성할 것이다.

 

 const[todos,setTodos] = useState

useState는 초기값을 담을 수 있는데 이안에 내가 넣고싶은 목록을 우선 넣어볼 예정이다.

 

const[todos,setTodos] = useState([
    {
      id:1,
      text:'리액트공부',
      status:'active'
    },
    {
      id:2,
      text:'프론트엔드의 꽃 ',
      status:'active'
    }
  ])

 

배열안에 객체를 이용해서 id, text,status (상태) 를 넣어준다.

 

내용을 만들었으면 화면에 보여줄 작업을 할것이다.

return (
    <section>
      <ul>
        {
          todos.map(item => <li key={item.id}>{item.text}</li>)
        }
      </ul>
    </section>
  )

<코드설명>

목록 리스트이니 div 태그보단 section을 이용하였다.

<ul>태그를 열었고 배열의 리스트를 하나씩 꺼내오기 위해서는 map을 써야하는데

자바스크립트를 쓰기위해선  { } 객체를 열어야한다.

그리고 useState 리스트를 저장한 todos를 .map 반복문을 돌려서 item을 하나씩꺼내준다.

{ itme.text }를 <li>에 감싸면 해당 text가 출력이 된다.

li는 고유한 키값을 가져야 하므로 ket={item.id} 를해주는것이 좋다.

 

 

화면을 출력해보면 리스트 형태로 잘 나온걸 확인할 수 있다.