TIL

• react - map

배열의 각 요소를
특정 논리(함수)에 의해
다른 요소로 지정(map)합니다.

map 메소드 변수에 담아서 사용하기

function Blog() {
  const postToElement = (post) => ( // 이 post에는 객체의 한개가 담긴다.
    // => 화살표 함수는 중괄호가 없어진다
    <div key={post.id}> // key값은 잊어버리기 쉬우니 유념하기
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

그냥 사용하고싶은곳에 쓰기

function Blog() {
  // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

React에서 map 사용 할 시에는!! key 속성을 꼭!! 넣어줘야 한다.
첫 태그(열고 닫는태그여도 상관없다)에 key = {?} 키 값 지정해줘야한다.

이 에러는 화면에 표시되는 오류가 아니고,
화면이 그대로 띄워지기 때문에 잊기 쉽다.

만약 내가 다른곳에서 porps 하여 받은 자료를
map으로 정리하게 될 때에도 key 값은 다시 넣어줘야 한다.

const [a,setA] = useState(여기는 a에 들어갈 초기값)
setA 는 함수로 사용된다.
무슨함수냐면 a안에 들어 가 있는 값을 아예 대체시킬건데
어떻게 대체 시킬지 정하는 함수다.

<tag onclick, onchage = {} >
on이벤트 태그 옆에 바로 선언 후 중괄호로 감싸주기

방법
(1) { } 중괄호 안에 쓴다
(2) 표현식은 쓸 수 없다
(3) 무조건 함수만 가능하다 // 함수()
(4) 아니면 화살표 함수를 통해서 함수를 넣을수도 있다
(4-1) { () => {} }
(4-2) { () => { setA(~~) } }

함수를 넣어서 사용할 거면 위에다가 함수를 선언해서
만들어 줘야 한다.

let [초기값,초기값변경] = useState('안녕') // 초기값 주고

function 초기값바꾸기(){
	초기값변경('반가워')
 } // 함수만들기
 
 <button onclick = {초기값바꾸기}> </button>