평행코드

오류부분 {lngs.map((lngs, i) => { //첫째파라미터는 array에 있던 자료 둘째는 0부터1씩증가하는 정수 변경부분 // 첫째파라미터를 lngs 변수이름으로하면 안되나봄 return ( {setModal(!modal); setTitle(i);}}className="postList__title">{lngs}//변경부분 {e.stopPropagation(); let copy = [...good] copy[i] = copy[i] + 1 setGood(copy) }}>😙{good[i]} 3월 29일 발행 { let copy = [...lngs]; copy.splice(i,1); setLngs(copy); }}>삭제 ); }) } 수정부분 {lngs.map((a, i) => { //첫째파라미터는..

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함수가 실행되기 때문이다.

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