/ react (component 파일관리, 이미지파일 저장경로) 2022.06.08 새싹-javascript (객체복사, map과 foreach의 차이)

javascript

● 객체 복사

leta=10;letb=a;a=30;console.log(a)//30→a는 값이 있는 주소를 참조할 것(얇은 복사)console.log(b)//10→b는 주소로 가서 값을 가져올 것(딥 복사)

leta={value:1}letnewA=a;newA.value=2;console.log(a.value)//2console.log(newA.value)//2→newA는 주소를 찾아오는 아이.console.log(a===newA)//true→객체는 참조 유형이고 참조 유형은 얕은 복사를 하기 때문.

// 딥카피 방법: 메서드, 스프레드시트 연산자 사용 Object.assign( )…//1depth까지만 딥카피 가능. // 라이브 모듈을 사용하면 2depth 이상까지 딥카피 가능.

// 중복구조시 사용→JSON 자료형태로 보내드립니다.JSON은 오브젝트와 동일한 자료형태인데 키값에 따옴표를 넣어야 한다. // 이를 사용하면 완벽한 딥카피를 할 수 있다.JSON.stringify( )//제이슨으로부터 수신된 객체를 문자로 전환하고 JSON.parse( )//그 문자를 객체(객체)로 전환하고

object_copy.html

object_copy2.html

●map과 foreach의 차이

map 반복문 foreach 와 사용법은 같지만 return 값이 다르다

map for Each // 한번씩 function 사용

[]. for Each (ele, index, arr) => {})

[]map(ele,index,arr)=>{})map은 결과값을 돌려준다

map01.html

맵이라는 반복 함수를 사용하면 키 값이 반드시 들어가야 한다.컴포넌트는 같을 수 있지만 키라는 값으로 식별자를 붙여야 한다.키 값을 넣지 않으면 에러가 나서 동작하지 않는다.

어떤 항목 추가 변경 시 식별자로 사용하기 위해 키 값을 적용한다.

키값의 밸류값을 줄 때는 고유의 ID값을 주어야 한다.인덱스 값을 키 값으로 사용하는 것은 적절하지 않다.인덱스 값은 언제든지 바뀔 수 있기 때문이다.react

● 컴포넌트 파일 관리 & 이미지 파일 저장 경로

public 폴더→이미지 압축 안됨(이미지 원본이 손상되지 않음) src 폴더→이미지 압축됨

public 폴더 안에 있는 아이들은 나중에 빌딩을 할 때 복사되어 들어간다.가능하면 src폴더에 넣고 특별한 경우에만 public폴더에 넣기

옵션 시프트 a: 리액트 파일에서 자동 주석 처리 생성→ {/**/}

컴포넌트 폴더를 만들고 그 안에 Header, MainFeed 폴더를 만들고 각 폴더에 jsx파일과 css폴더를 만들고 css폴더 안에 index.scss를 만들어서 꾸미다

폴더를 만들 때 폴더명 Header와 같이 첫 번째 문자의 대문자로 한다.

scss 파일을 만들면 하단에 있는 watchsass 버튼을 반드시 눌러야 한다.

GetHub에 있는 리액트 소스를 다운로드하면 폴더를 연 후 터미널에서 npminstall을 하지 않으면 모듈이 깔리면서 정상적으로 열린다.

error: Content is protected !!