리액트 처음 시작하는데 어떤 거 부터하지?
라는 고민 끝에 시작하게 된 구글 홈페이지 따라 만들기
인터넷 검색을 통해 CRA (Create React App)을 알게되었고, 아래와 같은 예시 화면을 얻을 수 있었다.
예시를 통해 코드를 분석을 했는데 생각보다 Vue.js와 비슷한 부분이 많아서 개념자체는 이해하기 쉬웠다.
그렇지만, Vue.js를 많이 사용하지 않아서 문법을 찾는데 생각보다 시간을 많이 사용했다.
function SearchBar() {
const [textArea, setTextArea] = useState(false);
const textAreaEnter = () => {
setTextArea(true);
};
const textAreaOut = () => {
setTextArea(false);
};
return (
<div>
<input
type="text"
className={
textArea
? "App-area-enter"
: ""
}
onMouseEnter={() => textAreaEnter()}
onMouseLeave={() => textAreaOut()}
/>
</div>
);
}
State
컴포넌트 내부에서 데이터 값을 바꾸기 위해 사용한다. 구글 검색창에 마우스 올리면 그림자가 생기고 마우스가 빠져나가면 그림자가 사라지는 이벤트를 구현하기 위해서 State를 사용했다.
input
검색을 할 수 있는 input에서 생각보다 많은 시간을 사용했다. css뿐만 아니라 외각 색을 설정했는데 왼쪽 위와 오른쪽 아래의 색이 달랐다. 검색을 계속해본 결과 border style을 적용하지 않아서 생기는 문제였다.
리액트을 공부하기로 마음먹고 처음 시작한 클론 프로젝트이다. 리액트에 익숙해지고 나면 바로 react native를 공부할 예정이다.
깃 주소