728x90 반응형 React30 [용어정리] React에서 Element와 Component의 차이는? React로 공부한지 4일째 컴포넌트를 배우고 있는데 #1번 #2번 1번과 2번의 차이가 궁금했다. 2번은 화살표 함수로 만든 함수형 컴포넌트라는 것 까진 알겠는데 1번은 변수인 것인가.. 뭔가 싶었다. 그래서 구글링 하다가 https://velog.io/@heumheum2/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84%ED%95%98%EA%B8%B0-3 기술면접 준비하기-3 Element와 Component의 차이점은 무엇인가요? Element Component instance 또는 DOM 노드 및 원하는 속성을 설명하는 일반 객체입니다. 실제 instance가 아닙니다. 화면에서 보고 싶은 것을 React에게 알려주는 일 velog.io 이 글을 .. 2022. 3. 20. [React]Chpater4_Styling,이벤트 React방식으로 Styling 리액트는 HTML문법이랑 살짝다른데 1. class 선택자를 className으로 바꿔줘야 한다. 2.css 코드를 리액트 안에 인라인 스타일링 가능하다. 예를 들어 사진 2개를 넣어준 Images컴포넌트에 이런식으로 클래스 선택자가 설정되어 있다. 사진의 가로 세로 크기를 설정해준걸 지우고 이걸 앞서 만들었던 (Chapter3) 이미지의 틀을 생성해주는 컴포넌트인 ImageFrame에 style props를 넘겨준다. style안에서는 가로,세로를 다시 설정해줄 수 있는데(style안에서는 css문법이 쓰여야 함) style에 중괄호를 2번 썼다. 이건 JSX 문법에서 객체를 생성해준 것이다! 단, value는 string이여야한다! 다른 스타일링을 하고 싶을 때! ht.. 2022. 3. 20. [React]Chapter3_컴포넌트 리액트에서 정의하는 컴포넌트는 크게 두가지이다. 함수형,클래스형 컴포넌트. 컴포넌트는 무조건 대문자로 시작한다. 지난번 Chapter1에서 Image1에 HomeImage를 두개씩 담아줬는데 이 HomeImage를 컴포넌트로 만들어볼 것이다! 이렇게 함수형의 컴포넌트로 만들고 다시 Image1에서 태그 형식으로 쓸 수 있다. 직접 구현해봅시다~! 그러면 이미지 3개를 띄어볼건데, 가장 상단의 사진은 MainImage컴포넌트를 사용할거고, 나머지 2개의 사진은 Images컴포넌트를 통해 띄어볼거다. 그리고 이 모든 걸 띄어주는거는 finalImage 변수에서 모아준 다음 --> 이렇게 render해 볼것이다. 나는 이미지들의 크기를 가로 200 세로 200으로 지정해줬고 이미지가 깨질때를 대비하여 alt속.. 2022. 3. 19. [React] Chapter2_리액트 안에서 JavaScript 쓰기! HomeImage라는 변수 안에 이미지 태그를 담아줬는데 Image1이라는 변수에 HomeImage에서 사용한 이미지를 또 담아주려한다. 그리고 여기서는 이미지를 두개 띄워볼거다. {HomeImage}를 쓰면 render가 잘되는 것을 확인할 수 있다. 이렇게 중괄호를 쓰면 이 안에서는 자바스크립트 문법을 사용할 수 있다. 기분 탓인지 모르겠는데 아이디 선택자로 Image1을 선언하고 img태그를 넣으면 사진이 크게 나오는 대신 화질이 좋은데 클래스 선택자로 Image1을 선언하면 사진이 조그마하게 나오는 대신 화질이 좀 깨진다. 아무래도 아이디 선택자는 하나의 태그에 이름을 정해서 디자인을 하는거고 (대신 동일한 이름 부여 불가능) 클래스 선택자는 여러곳에 적용해서 디자인을 할 수 있기 때문인 것 같다.. 2022. 3. 17. 이전 1 ··· 4 5 6 7 8 다음 728x90 반응형
