React

리그오브레전드의 챔피언과 정보를 리스트로 출력해보자.위 코드의 경우 list가 3개밖에 없지만 이게 많아지면 코드가 매우 길어질 수 있다.이를 해결하기 위해 다음과 같이 Champion function을 하나 만들어주자.그래도 아직 코드가 길어질 수 있으니 더 짧게 만

useRef 사용하기 useRef는 react에서 특정 DOM을 선택할 때 사용한다. useRef를 사용하여 초기화 버튼을 눌렀을 때 id 입력창에 focus 되도록 하는 예제를 만들어보자.

input으로 입력을 받아 list에 추가하여 렌더링을 하는 코드를 작성해보자.App.jsindex.jsCreateChampion.jsuserRef를 사용하여 배열의 id가 초기화되지 않도록 하였다.구조적으로 잘 짜여진 코드는 아니지만 그래도 잘 돌아가게 작성하여 보았

list에 항목 제거 버튼을 추가하여 특정 항목을 삭제할 수 있도록 해보자.App.jsCreateChampion.jsindex.jsfilter를 사용하여 해당 항목의 삭제 button 클릭 시 해당 id를 걸러내도록 onRemove를 작성하였다.

챔피언의 이름을 누르면 op 마크를 달 수 있도록 만들어보자.App.jsindex.jsCreateChampion.jsonToggle 함수를 만들어 champion의 op속성이 변경되도록 만들었다.

useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 하는 Hook이다.useEffect의 가장 기본 형태는 다음과 같다.렌더링 시 작업을 수행할 function은 함수이다. deps는 배열 형태이며 검사하고자 하는 특정 값 혹은 빈 배열이다.