[React] Chapter2_리액트 안에서 JavaScript 쓰기!

 

HomeImage라는 변수 안에 이미지 태그를 담아줬는데 Image1이라는 변수에 HomeImage에서 사용한 이미지를 또 담아주려한다. 그리고 여기서는 이미지를 두개 띄워볼거다.

 

{HomeImage}를 쓰면 render가 잘되는 것을 확인할 수 있다. 이렇게 중괄호를 쓰면 이 안에서는 자바스크립트 문법을 사용할 수 있다.

 

기분 탓인지 모르겠는데 아이디 선택자로 Image1을 선언하고 img태그를 넣으면 사진이 크게 나오는 대신 화질이 좋은데 클래스 선택자로 Image1을 선언하면 사진이 조그마하게 나오는 대신 화질이 좀 깨진다. 아무래도 아이디 선택자는 하나의 태그에 이름을 정해서 디자인을 하는거고 (대신 동일한 이름 부여 불가능) 클래스 선택자는 여러곳에 적용해서 디자인을 할 수 있기 때문인 것 같다. (여러개가 동일한 이름 가질 수 있음)

 

마지막으로 HomeImage와 Image1을 함께 담아주는 finalImage라는 변수를 생성해줄건데

 

이렇게 하면 에러가 뜬다. 왜냐면 리액트에서 그릴수 있는거는 최상위태그가 하나여야 하기 때문이다!

요렇게 div 태그 하나에 묶어주면 된다!

그러면 기본 이미지였던 HomeImage에 Image1에 이미지 2개가 딸려오는 것을 확인할 수 있다!