JavaScript/리엑트 (3) 썸네일형 리스트형 useEffect의 dependency array useEffect는 리엑트에서 side effect를 처리할 때 사용하는 함수입니다 쉽게말해 사이드 이펙트가 발생할꺼같은 코드는 useEffect에 넣어 처리합니다 useEffect에는 dependency array라는것이 있습니다 useEffect는 1번째 인자로 실행시킬 함수가 들어가고 2번째 인자로 배열이 들어가는데 이 배열을 dependency array라고 합니다 2번쨰 인자를 생략하면 렌더링 될때마다 1번째 인자로 준 함수가 실행되고 2번째 인자를 넣으면 2번째 인자값이 변할때마다 실행됩니다 처음 1번만 실행하고 싶다면 빈 배열을 넣으면 됩니다 사용 예시로는 ajax 요청, DOM reference 참조 및 변경을 할때 side effect가 발생하는데 이런 처리를 할때 useEffect로 처.. React 컴포넌트의 key 속성 리엑트에서 key속성은 어떤 항목을 변경,추가,삭제할지 식별하는것을 돕는 역할을 합니다 리엑트는 컴포넌트의 상태나 속성이 변할때마다 렌더링을 하는데 효율적으로 동작하기 위해 모든것을 랜더링하지 않고 바뀐 부분만 재렌더링을 합니다 이때 바뀐 부분을 체크하기 위한 방법으로 리엑트의 key를 사용합니다 key값을 설정 할 때 조건으로는 유일한 값을 지정해야 됩니다 key값을 설정하면 장점으로는 전체를 렌더링하지 않고 바뀐 부분만 효율적으로 렌더링을 할 수 있다는 장점이 있습니다 React Props, State 프롭스(Props)는 외부로부터 전달받은 값이고 스테이트(State)는 컴포넌트 내부에서 변할 수 있는 값을 의미합니다 먼저 프롭스의 특징으로는 프롭스는 객체형태로 어떤 타입의 값도 전달 할 수 있고 사이드 이펙트를 막기 위해 프롭스는 읽기 속성이라는 것 입니다 즉 프롭스는 부모가 자식에게 전달해주는 객체형태의 데이터이며 변하지 않는 불변성을 가졌습니다 스테이트는 내부에서 변할 수 있는 값을 의미합니다 컴포넌트내에서 변할 수 있는 값은 스테이트로 다루어야 됩니다 예를들어 사용자가 값을 입력하는 input이나 textarea의 값은 사용자가 입력할때마다 변하기 때문에 스테이트로 데이터를 다루는것이 적절합니다 또한 스테이트의 값이 변경되면 자동으로 재랜더링을 해주기 때문에 실시간으로 바뀌면서 그것을 보여줘야.. 이전 1 다음