평행코드

array, object 자료를 다룰땐 원본데이터를 직접 조작하는 것 보다는 기존값을 보존해주는 식으로 코드를짜는게 좋습니다. 원본을 막 바꿔버리게 되면 갑자기 원본이 필요해졌을때 난감하기 때문입니다. 3번째 줄에서 let copy = lngs; 가 아닌 let copy = [...lngs]; 이렇게 ... 괄호를 해주는 이유는 lngs에 있던 자료들을 괄호를 벗긴다음 다시 array로 만들어 주기 때문입니다.

JSX 문법 1 className 스타일을 주기위해서 js는 class명을 넣을때 class = " "라고넣는데, 리액트는 className = " "라고 해야합니다. JSX 문법 2 변수를 넣을때 { } 밑에 h4태그에 변수값을 넣고싶다면, post라는 변수를 만들고 { post } 이렇게 중괄호로 감싸주면 됩니다. JSX 문법 3 스타일 속성넣기 스타일 속성을 넣고싶다면, style = { } 안에 { } 자료형으로 넣어야 합니다. { 속성명 : "속성값" } 이런식으로 넣으면 됩니다!

map() 함수 배열을 가지고 있을때 각가의 element들을 바꿀 수 있게 해준다 ( )에 함수를 넣을 수 있는데 배열의 모든 item에 대해 실행된다 배열에 6개의 item이 있다면 6번 함수가 실행된다 그리고 그 함수로부터 내가 return한 값은 새로운 배열에 들어가게 한다 리액트는 기본적으로 list에 있는 모든 item을 인식하기 때문에 key를 넣어 고유하게 만들어주어야 한다 map의 첫번째 argument는 값(array안에 있던 자료)이고, 두번째 index는 0부터 1씩 증가하는 정수를 의미한다

컴포넌트가 destroy될 때도 코드를 실행할 수 있다. useEffect는 함수를 받고, 이 함수는 dependency가 변화할 때 호출된다. 현재는 dependency가 비어있으니, 컴포넌트가 처음 생성될 때 함수가 호출된 후 다시 호출되지 않는다. 그래서 컴포넌트가 파괴될 때도 함수를 실행하고 싶다면, useEffect 함수가 새로운 함수를 return하게 만들어주어야한다. 왜냐면 deps 가 비어있으면 자동으로 컴포넌트가 파괴될 때 cleanup 함수가 실행되는데 그과정이 리렌더링으로 useEffect함수가 실행되고, 클린업하면서 전에있던 이펙트인 console.log("hi :)")가 삭제되며, 새로운 이펙트 함수인 return함수가 실행되기 때문이다.

- 1컴포넌트당 1개의 .js 파일을 가질 수 있어서 모듈화가 가능하다. - 컴포넌트별 스타일은 .module.css 파일을 생성후 import 하여 사용한다. => 여기서 스타일은 className이나 id로 import한 스타일 객체의 property를 전달하여 적용된다는것이다 이는 기존의 어떤 class나 id에 적용할 스타일이아닌 특정 jsx element에 적용할 스타일로 생각할 수 있다. react 컴파일 과정중 무작위로 class나 id가 생성되기 때문에 css파일의 class,id의 이름을 굳이 외울 필요가 없다.

설정 가능한 컴포넌트 마크업이나 스타일을 최대한 재사용할 수 있다. Btn 컴포넌트를 어떤 스타일로 설정했는데, 바꾸고 싶은 스타일은 fontSize와 text 이며, 복붙대신 어떤 prop들을 받을 수 있는 Btn 컴포넌트를 만든 것이다. Btn 컴포넌트의 이 prop들에 접근할 수 있는 방법은, Btn 컴포넌트 함수의 첫 번째 인자 안에서 가능하다. 첫 번째 인자 안에서, 전달된 모든 prop들을 하나의 오브젝트로서 받는다. Btn 컴포넌트의 prop들에게 접근하려면 prop.text 등르오 적어준다. 아니면 오브젝트 안 요소들을 쉽게 빼올 수 있는 ES6의 쉬운 방법을 써도 된다. ex) Btn({text})... ... {text} 또는 Btn(props)... ... {props.text}