TIL 220803

Done 😁

• todo list frago88 의 컴포넌트 모두를 styled component 로 바꿔주었다. 그 후 기존 style.css 를 모두 삭제하였다.

• todo list frago88 기존 useState 방식에서 Redux 로 state 관리 방법을 바꾸었다.

• react-router-dom 라이브러리로 Router.js 생성, detail.js(상세페이지)를 만든 후 데이터 바인딩하였다.

---

Learned 👌

URI & URL & URN 👈 정리글

---

javascript - Array.prototype.find()

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

활용법1 : find(조건) 조건을 만족하는 element 찾기

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

활용법2 : 속성 중 하나를 사용하여 배열에서 객체 찾기

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

const result = inventory.find(fruit => fruit.name === 'cherries');

console.log(result) // { name: 'cherries', quantity: 5 }

리액트에서 활용한 예

const Detail = () => {
    const todos = useSelector((state) => state.inputTodo.todos);
    const navigate = useNavigate();
    const param = useParams();
  
    const thisTodo = todos.find((e) => e.id === param.id) 
    // param에서 들어온 id값과 state 인 todos 의 id 값이랑 같은 객체를 찾는다.
    
    const shoutedId = param.id.split('-')[0]

    return (
        <Background>
            <Modal>
                <Top>
                    <div>id : {shoutedId}</div>
                    <div><button onClick={() => navigate('/')}>이전으로</button></div>
                </Top>
                <Bottom>
                    <h1>{thisTodo.title}</h1>
                    <div>{thisTodo.body}</div>
                </Bottom>
            </Modal>
        </Background>
    )
}