목록분류 전체보기 (68)

대기업을 향한 디벨롭 블로그

filter 함수 사용해서 데이터 찾기

filter 함수를 이용하여 배열안에 객체를 끄집어내어 보자. 먼저 objData라는 배열을 하나 만들어주었다. 사용할 데이터이다. 바로 데이터에 filter함수를 적용시켜보면 배열요소를 하나하나씩 돌면서 콜백함수안에있는 코드를 실행한다. 첫번째요소 : element(요소)는 배열안에있는 하나의 요소를 출력한다. 두번째요소 : index(0부터~array.length) 0부터 숫자를 출력한다. 잘 출력되는걸 볼 수 있다. 이제 여기서 return을 사용하여 데이터를 뽑아보자. 먼저 이름이 ari인 데이터만 뽑아보자. filter된 데이터는 newData라는 변수에 담아준다. objData가 array형태이기때문에 newData또한 array형태이다. return에서 조건문을 달아주는데 조건이 true라면..
JavaScript 2022. 7. 7. 15:27
{ props defaultProps children } Component-2

이번엔 props에 대해 알아보자. props는 컴포넌트에 데이터를 넘겨줄 수 있다. 코드로 바로 알아보자. 일단 이렇게 생긴 컴포넌트가 있다. 컴포넌트를 잘 모른다면 https://mhypro.tistory.com/53 Component 컴포넌트-1 리액트 컴포넌트에 대해알아보자. 일단 리액트는 SPA(Single Page Application)이다. 코드를 짜다보면 알겠지만 index.html인 파일이 존재한다. 하나의 html안에서의 Component가 바뀌는거다. Component란 html태.. mhypro.tistory.com 이걸 추천한다. 태그안에 변수하나를 만든다고 생각하면된다. 변수명=데이터 이렇게 보내주면 된다. 그리고 컴포넌트함수에서 props로 받는다. 이름은 props가 아닌 ..
ReactJS 2022. 7. 7. 13:45
Component 컴포넌트-1

리액트 컴포넌트에 대해알아보자. 일단 리액트는 SPA(Single Page Application)이다. 코드를 짜다보면 알겠지만 index.html인 파일이 존재한다. 하나의 html안에서의 Component가 바뀌는거다. Component란 html태그들이모인 덩어리라고 보면된다. 코드로 알아보자. 먼저 Component는 함수로 만들어준다. 예전 React컴포넌트는 class로 만들어졌지만 , 새롭게 업데이트 되었다. App()함수 밑에 이렇게 Component()함수를 새롭게 만들어주었다. 여기서 실수를 많이하는점은 ✼ 컴포넌트는 무조건 대문자로 시작해야된다는점이다. App()함수도 컴포넌트이기때문에 대문자로 시작되어있다. 결론은 컴포넌트는 무조건 대문자로 시작해야 적용이된다. 이렇게 App함수 리..
ReactJS 2022. 7. 7. 10:32
정렬 객체정렬 sort reverse *localeCompare

예제를 통해 정렬함수를 알아보자. 숫자 데이터 정렬 배열안에 있는 숫자들을 정렬해보겠다. ✺여기서 문제는 그냥 arrData.sort() 해주면 안된다. sort() 함수만 호출했을경우 문자열 형태를 비교하게되어 숫자는 정렬되지않는다. sort()함수안에 콜백함수를 인자로 넣어 return을 해준다. a , b가 배열안에있는 데이터들이 차례대로들어와서 비교를하게된다. a - b에서 위 데이터로 비교를하면 맨처음 a=4 , b=3이온다. a-b를 해주면 1이나온다. a가 더 크기때문에 a는 뒤로밀리게되며 a와 b의 자리가 바뀔 것이다. 이런형태이다. 그렇다면 내림차순정렬은 어떻게할 것 인가? 정말 간단하다 오름차순정렬을 return a-b를 했다면 return b-a를 해준다면 서로의값이 달라지며 위치도 ..
JavaScript 2022. 7. 7. 10:09
이전 Prev 1 2 3 4 5 6 7 8 ··· 17 Next 다음