전체 글51 [React] component, state, props, useEffect 연습 ( Monsters ) Monsters 는 1. fetch를 이용해서 API 데이터(객체 배열)를 불러오고, 그 데이터를 state에 저장한다. 2. state를 자식 컴포넌트에게 props 를 사용하여 값을 전달해준다. 3. 자식 컴포넌트에서 map 함수로 배열을 화면에 나타내고, 그 자식 컴포넌트에서 각 객체의 키 값으로 각 배열의 정보를 불러온다. 4. 검색 창을 만들어 입력 값을 받고, filter 함수로 검색 창의 입력 값과 동일한 name 값을 가진 요소만 나타나게 해준다. 의 과정으로 구성된 연습 페이지이다 ! fetch 로 API 가져오기. useEffecf 의 종속 배열을 []로 주어서 렌더링 시 처음에만 실행되게 했다. useEffect(() => { fetch("https://jsonplaceholder.t.. 2022. 6. 18. [JS Method 기초] slice 와 splice 1. slice slice 메소드는 배열 내의 시작점과 끝나는 지점을 정하고, 범위에 따라 새 배열을 리턴. 시작점만 정하면 그 다음부터 시작하는 배열 생성, 음수로 시작점을 정하면, 뒤에서부터 인덱스를 셈 (문자열 사용 가능) let 새 배열 = 원래 배열 . slice ( 시작 인덱스 , 끝 인덱스(포함X) ) 원래 배열은 변하지 않음. 2. splice splice 메소드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나, 새로운 요소를 추가할떄 사용한다 (! 문자열 사용 불가) let 새 배열 = 원래 배열 . splice ( 삭제할 시작점, 삭제할 개수(안정하면 끝까지) ) before에 요소들이 삭제되고, after에 삭제된 항목이 저장된다. (원래 배열 변함) 잘 알아둬라 ! 2022. 6. 16. 세상 사람들이 map 함수 적용 시 key props를 부여하는 이유 React는 변화를 감지한다. 리스트의 고유의 값이 없다면, 하나가 추가되더라도 리액트는 리스트 전체를 다시 렌더링한다. 즉, 불필요한 렌더링을 하게 되는 것이다. 그렇기 때문에 에러는 나지만, 홈페이지는 굴러간다. 결코 좋지 않다. 하지만 좋지 않은 것을 나쁘다고 할 수 있을까 ? 세상을 이분법적으로 보는 건 우리의 삶에 피로도를 더하고, 구체적인 판단력을 흐리게 한다. 좋은게 좋은거라고 난 리스트에 키 값을 줄 것이지만, 오늘은 키 값으로 index 값보다 더 좋은 개별 ID 값은 주지 않을 것이다. 이것은 분명히 어리석은 선택이다. 왜냐하면 키 값으로 index 값을 주게 된다면, 리스트가 재배열될 때, 각 엘리먼트마다 인덱스 값이 바뀌며 결국 전체가 다시 렌더링 되기 때문이다 하지만 개별 ID를 .. 2022. 6. 12. VScode로 React 시작하기 https://nodejs.org/en/ 2022. 6. 12. [Codekata] 중복되지 않은 제일 긴 단어의 길이 반환 코드 카타 Day 1 / 문제 3 String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요. str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환) 예를 들어, str = "abcabcabc" return 은 3 => 'abc' 가 제일 길기 때문 str = "aaaaa" return 은 1 => 'a' 가 제일 길기 때문 str = "sttrg" return 은 3 => 'trg' 가 제일 길기 때문 str = "abcddddjklmnopddf" 은 8 => 'djklmnop' 가 제일 길기 떄문 안녕 ~ ! 이 문제는 문자열을 입력 받아서 그 문자열 중에 중복이 없고, 연속적으로 ! 가장 긴 단어의 ! 길이를 반환하는 함수를 만드는 문제... 2022. 6. 10. 리액트 기초 상식 React -> 사용자 인터페이스를 만드는 자바스크립트의 라이브러리 React 시작하기 1. React 폴더를 만들 상위 폴더에 가서 터미널을 열고 입력한다. ( 나 같은 경우 상위 폴더를 vscode로 끌어와서 놓고 vscode에서 터미널을 실행함 ) npx create-react-app 앱 이름 -> happy hacking ! 이라는 말이 터미널에 나옴. 그럼 새로 생긴 폴더를 끌어서 visual studio code에 놓는다. 2. 다시 새 터미널을 열고 npm start를 입력한다. npm start -> 그러면 localhost:3000 주소로 리액트 기본 홈페이지가 실행된다. 3. 정리 - public에서는 index.html을 제외하고 전부 삭제 - src에서는 아래 사진의 4개 제외하고 .. 2022. 6. 7. 이전 1 ··· 3 4 5 6 7 8 9 다음 반응형
