[REACT] 리액트 입문하기

장창현·2023년 8월 6일

React

FrontEnd

목록 보기

2/5

'생활코딩'님의 강의를 통해 학습한 내용입니다!

📚React

📗컴포넌트 만들기

사용자 정의 함수를 컴포넌트라고 부름

컴포넌트 사용전

 function App(){
 	return (
    <div>
    	<head>
    		<h1>react배우기</h1>
    	</head>
    	<footer>
    		<span>일어나.. 코딩해야지</span>
    	</footer>
    </div>
    );
 }

컴포넌트 사용

//Header컴포넌트 생성
function Header(){
	return (
  	<head>
  		<h1>react배우기</h1>
  	</head>
  	);
}
//Footer컴포넌트 생성
function Footer(){
	return(
    <footer>
    	<span>일어나.. 코딩해야지</span>
    </footer>
    );
}
function App(){
 	return (
    <div>
    	<Header></Header>
    	<Footer></Footer>
    </div>
    );
 }

📕PROPS

React의 속성
컴포넌트를 사용하는 외부자를 위한 데이터
사용자 정의 속성, 기존에 있는 속성을 통해 값을 전달할 수 컴포넌트에 값을 전달 할 수 있음
객체 형태로 값이 전달, 그안에 배열, 객체도 가능
이를 jsx에 사용하기 위해서는 { }로 감싸줘야함

반복문안에서는 고유한 key를 가져야함

//props적용
function Header(props){
 	return (
   	<head>
   		<h1>{props.title}</h1>
   	</head>
   	);
}
//props적용
function Footer(props){
	return(
     <footer>
     	<span>{props.content}</span>
     </footer>
     );
}
function App(){
  	return (
     <div>
     	<Header title="react배우기"></Header>
     	<Footer content='일어나..코딩해야지'></Footer>
     </div>
     );
  }

📘이벤트

props를 통해 함수를 전달
컴포넌트에서 onclick은 js와 다르게 onClick임
a태그는 클릭시 페이지가 reload되는데 이를 방지하기위해서는 preventDefault()함수를 사용
이벤트 함수의 첫번째 파라미터에는 event와 관련된 정보들이 담긴 매개변수가 전달됨, 아래 코드에서의 event

event.target은 이벤트를 유발시키 태그를 가르킴

//이벤트 생성
function Header(props){
 	return (
   	<head>
   		<h1 onClick={function(event){
           props.onChangeMode();
         }}>{props.title}</h1>
   	</head>
   	);
}
function Footer(props){
	return(
     <footer>
     	<span>{props.content}</span>
     </footer>
     );
}
function App(){
  	return (
     <div>
     	<Header title="react배우기" onChangeMode={function(){
                 alert("열심히 배울거야!");
         }}></Header>
     	<Footer content='일어나..코딩해야지'></Footer>
     </div>
     );
  }

📙State

state를 통해 어떤 값이 return되면 그 값을 가지고 UI를 바꿈
state는 컴포넌트를 만드는 내부자를 위한 데이터
{useState}라는 hook 사용, 리액트에서 제공하는 기본적인 함수
지역변수를 state로 업그레이드
useState의 인자는 state초기값이고, state의 값은 useState[0]에 저장, 그리고 이를 바꿀때는 useState[1]의 함수로 변경
useState의 함수가 실행되면 App()이 다시 실행하여 화면에 뿌려줌

장창현

하고 시픈 거 다 하면서 살 거야

이전 포스트

[TypeScript] 타입단언과 타입가드

다음 포스트

[REACT] 리액트를 다루는 기술- 컴포넌트 라이프 사이클

2개의 댓글

happy

2023년 8월 6일

좋은 정보 감사합니다

1개의 답글