react
내가 알게 된 리액트 기능들에 대한 내용들을 정리할것이나,
순서는 양이 어느정도 되면 그 때부터 정리를 하도록 하자
컴포넌트(component)
하나의 파일안에서 const,function 이라는 여러 html 공간을 구현할 수 있음
function App(){ 여기가 메인
return(
<>
<PageName/>
</>
);
};
function PageName(){ 얘는 App이라는 메인파일에서 또 구현한 html이라고 보면 됨
return(
<div>
<h2>사용하기</h2>
</div>
);
};
export default App;
장점 : 넣었다 빼기 쉽다 -> 교체가 쉽다
단점 : 가독성이 떨어질 수 있다 속도가 느리다
필자는 이를 이용해서 페이지를 만들 때 만들어 놓은 것과 비교를 하면서 페이지를 구현하고있다
개인적으로 확실히 html보다 편하다
이벤트
onClick , onChange 등등 해당 요소에 바뀌는 모든 상황을 이벤트라고 간주한다 ?
event == e 라고 쓰고 이 행동들을 조건으로 하여금 동작을 실행시킬 수 있다
- value 는 input안의 내용과 관련이 있음
- name 과 id 클래스 이름은 비슷한 맥락을 가지고있으나, name사용자가 이벤트 또는 요소안의 내용에 접근하기위해? 일종의 key값인듯하다 ex) name : value 식
요소
각종 태그들 h , p , aricle , form , div? , span, a, img, option , button , input ,ul , li,label em등을 뜻하고 상황에 맞게 가져다 쓴다
-
form 컨테이너 안에 또 공간을 만들 때 일단 쓰긴함
-
article 아직 모름
-
select,option 프로그램에서 제공하는 드롭다운
select는 보여지는 태그 , option은 드롭다운임 -
ul , li 리스트형태인데 주로 아이템들(이미지들) 나열할 때 사용하는듯함
-
label 체크박스랑 텍스트랑 합쳐서 텍스트를 클릭해도 체크박스를 동작 시킬 때 주로 사용하는 태그
-
input 주로 입력을 받을 때 사용되는 태그인데 type을 어떻게 주냐에 따라서 용도가 달라짐
text,password,submit,button,checkbox,radio,reset
checkbox 말그대로 체크박스 중복선택가능
radio 체크박스이긴하나 중복선택 불가로 알고있음 -
em 텍스트를 강조할 때 사용
css
각 요소들에 스타일(꾸미기),위치 조정 등을 할 수 있는 기능 .css 파일을 만들어서 설정을 해도 되고
요소 안에 style 이라는 기능으로 인라인 스타일 지정도 가능하며,
기본 css가 안 먹힐 때 사용할 수 있는 강제적인 filename.module.css 파일도 있고
또 파일 안에서 styled.component (스타일컴포넌트 ) 라고해서 const 형태로 style css를 설정할수도있다
npm import
기본적으로 react는 라이브러리들을 불러와서 사용하게되는데 대부분의 기능들을 무조건 import 해서 사용하게 된다 이 때는 꼭 사전에 기능들을 설치해야한다 예를들어 fontawesome , swiper , router 등
npm install 명령어~ 이런느낌으로 설치해주고 import 로 불러와서 사용하게된다
아직은 명령어에 익숙치 않아서 어려움이 있지만 좀 더 찾는 능력을 키우다보면 익숙해지지않을까 싶다
import
css던 이미지파일이던 , react에선 import로 불러와서 사용하게된다
