component 복습

한동안 jsp만 하다가 react를 한번 맛보고(?) 건들지 않아서 이번에 기회에 다시 복습하고있다.

오랜만에 보는 컴포넌트 구조는 처음에는 당황 스러웠지만 다시 익숙해졌다.

뭔가 계속 정적이었던 jsp 보다 front를 동적으로 구현할 수 있어서 수월했다.

Todo리스트를 만들어 보고있는데

app.js라는 큰 화면안에서 파트별로 내가 원하는 부분을 컴포넌트로 구현하는 방식이라서 그런지

바로 페이지를 하나 만드는것 보다 작은것 부터 해보려고한다.

일단 react는 html xml과 구분되어 지기위해 camelcase로 작성을 유의하자

props와 state를 까먹었지만 다시 보니 생각이 났다.

나 자신의 언어로 단어의 의미를 재정의 해보자면

prop은 자식 컴포넌트에게 넘겨줄 값

state는 현재 상태와 그 상태를 바꿀 함수 const [value,setValue] = useState(<초기값>);

이런식으로 지정해서 사용한다.

컴포넌트 계층 구조에서 살짝 헷갈린 부분이 있는데

app밑에 컴포넌트에 전부 선언 하는것이아니라 큰틀을 잡고 하위 컴포넌트 안에 상세 컴포넌트를 구현하는식으로 진행하면 좋을 것 같다.

 

children을 사용하여 컴포넌트에서 다른 컴포넌트를 담을 수 있다.

이러한 방식을 활용하면 추가로 childeren.left ,children.right 같은 방식으로 아직 어떤 컴포넌트가 들어올지 예상 할 수 없는 상황에서 자식 컴포넌트로 출력을 전달해줄 수 있다.

 

컴포넌트 안에 다른 컴포넌트를 포함 하며 그 포함된 자식 컴포넌트에 prop을 그대로 전달해 준다.

useRef 이건 까먹어서 다시 정리한다.

useRef:

react 라이브러리를 사용하지 않고 기존에 js로 개발시에는 특정 dom의 접근과 dom을 수정할때

getElementById,querySelector같은 함수를 사용하여 dom을 선택했다.

리액트에서도 마찬가지로 가끔 특정 dom을 직접 선택해야하는 상황이 있을 거다.

그때 ref를 사용한다.

ref를 사용할때는 useRef라는 react Hook함수를 사용한다.

버튼 클릭시 초기화가되어 input에 포커스가 잡히도록 useRef 사용해보자.

import React,{useRef} from 'react';

function InputSame(){
//
//
const nameInput = useRef();

const onReset=()=>{
	nameInput.current.focus();
}

return(
	<div>
		<input
			name="name"
			placeholder="이름"
			onChange={onChange}
			value={name}
			ref={nameInput}
		/>
		<button onClick={onReset}>초기화</button>
	</div>
)
}

 

 

useRef()를 사용하여 Ref 객체를 만들고, 이객체를 우리가 선택하고 싶은 DOM에 ref값으로 설정해주면 ref객체의 .current 값은 우리가 원하는 DOM을 가르키게 된다.