[React]기초 - JSX 활용

jsx를 열심히 배우고 포스팅한지 두달이 넘었고,, 

오랜만에 쓰려니 까먹었다.. 다시 복습 중..

 

연습문제1) ["Hello World", "Installation"] 이 부분을 똑같이 출력해보자 

일단 저 두 타이틀을 불러오려면

posts[0].title, posts[1].title 인데 jsx에선 자바스크립트를 표시하기위해 

중괄호를 사용해야하므로 {posts[0].title, posts[1].title} 그리고 동일하게 출력하기위해 대괄호를 추가한다.

 

 

작성한 코드

---

map을 이용한 반복

고차함수 map 

1. 배열의 각 요소를 

2. 특정 논리에 의해

3. 다른 요소로 지정한다.

 

이 map을 JSX에서 사용하려면 키값이 필수인데

key값으로 id값을 넣어준다. 정~말 키값으로 넣을게없다면 최후의 수단으로 배열의 인덱스를 넣는다고한다.

 

 

연습문제2) posts의 내용을 출력하기

 

내가 헷갈렸던 부분

예제부분에서 변수를 만들고 map함수를 실행했는데

동일하게 const  content = posts.map((post) => 시작하면 오류가난다.

 

그이유는 따로 변수 설정할 필요없이 posts.map부분도 중괄호에 담아서 바로시작!

이전단계의 예제를 보고 풀었다.

작성한 코드