본문 바로가기

WEB32

[React] 훅(Hooks) 📖리다기, 공식문서, 노마드 코더, 제로초님의 영상을 보고 제가 이해한 내용을 바탕으로 정리한 글입니다.📖 리다기에서 8장에 훅에 대한 설명이 나온다. 예제를 따라하면서 해보았지만 8장까지 휘뚜루마뚜루 달려서 그런가 뇌에 과부화가 와서 머리가 받아들이기를 거부를 하는 것 같았다. 하지만, 8장까지 했을때 이 부분이 비중이 있고 중요하다고 느껴졌기 때문에 하루 쉬고 하루 다시 날 잡아서 공식문서와 책, 영상을 가리지 않고 찾아본 결과 어느 정도? 조금은? 이해를 할 수 있었다.😥 우선 제일 중요한 포인트는 개념을 어느 정도 이해를 하고 예제를 다시 해보는것!이 이해를 하는 데 많은 도움이 됐다. 또, 노마드 코더님의 영상과 제로초님의 훅에 대한 영상이 도움이 많이 됐다. 훅은 함수형 컴포넌트에서 state.. 2021. 1. 6.

Input 태그, 속성 오늘은 그동안 리액트 코드를 작성하면서 무작정 따라하기만 바빴었는데, 쭉 예제를 작성해오면서 빠지지않는 태그들이 있었다. input태그가 참 많이 쓰였는데 계속 쓰면서 공부가 부족해서 제대로 쓰지 못하는 것 같아서 좀 찾아봤다. this.input = ref} type='password' value={this.state.password} onChange={this.handleChange} className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''} onKeyPress={this.onKeyPress} /> 이렇게 input 태그를 작성할때 태그 안에 작성되는 속성들을 더 다양하게 알고, 잘 활용하고 싶다는 생각에 찾.. 2021. 1. 3.

[React] 스크롤박스 코드에 위아래 이동 기능 구현 📖리액트를 다루는 기술📖 책에 있는 ref예제인 스크롤 박스 조작 코드는 '맨밑으로'라는 버튼을 누르면 자동으로 스크롤을 맨 밑으로 내려가게 해주는 내용이다. 하지만, 나는 여기서 응용하기 위해서 버튼을 누를 때마다 스크롤 박스가 위, 아래로 이동할 수 있도록 구현하고 싶었다. 리액트를 다룬지 얼마 되지 않아 처음에는 이미 작성되어져 있는 코드를 어디서부터 손 대야 될지 막막했지만, 앞에서 했던 예제들을 이용해서 곧장 방법을 찾아낼 수 있었다. 일단 스크롤이 내려가있을때는 버튼을 누르면 올라와야하고, 올라가있을 때는 내려와야하기 때문에 상황에 따라 값이 달라지기 때문에 이에 대한 초기값들을 설정해줘야한다. 이에 따라 앞 장에서의 예제들을 떠올려서 state에 대한 초기값을 App.js에 설정해주었다. s.. 2021. 1. 2.

[React] ref 오늘은 ref에 대해서 공부해보았다. 리액트를 다루는 기술 책을 보면서 공부를 하다가 ref에 대해서 이해가 부족해서 공식문서를 찾아보게 되었다. ko.reactjs.org/docs/refs-and-the-dom.html ref(Reference) ref는 레퍼런스라는 뜻인데, 이를 번역하면 참조라는 말이다. 과연 코딩에서 참조라는 것은 어떤 것을 뜻하는 것일까? 원래 다른 언어를 배울 때, 참조는 복제와 비교가 되었었다. 복제는 파일을 복사하는 것이라면, 참조는 바로가기를 만드는 것과 같다고 비유되었다. 참조는 원본 파일에 대한 주소 값이 담겨있어서 누군가가 이 바로가기에 접근했다면 여기에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 되는 것이다. 쉽게 말하면, 원격으.. 2021. 1. 1.

[React] render() 함수 render함수에 대한 궁금증은 오늘 컴포넌트에 관한 리액트 공식문서를 보다가 시작됐다. 함수형 컴포넌트와 클래스형 컴포넌트의 차이에 대해서 공부를 하다가 render함수에 대한 의문이 생겼다. 위 문서를 보다가 지금까지 예제로 작성해봤던 코드들과 다르게 ReactDOM.render라는 함수가 쓰인것을 보게 되었다. 지금까지는 클래스형 컴포넌트에서 state값을 변경하기 위해서 render함수를 작성하는 것 밖에 없었는데 ReactDOM.render함수는 과연 어디에 쓰이는 것일까?라는 궁금증에 이곳저곳에 찾아보았다. render함수에 대한 공식문서(ko.reactjs.org/docs/react-dom.html#render)를 보게 되었을 때, ReactDOM.render함수는 최신의 React 엘리먼트.. 2020. 12. 30.

[React] 함수형 컴포넌트 VS 클래스형 컴포넌트 안녕하세요. 오늘은 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 인터페이스를 설계할 때 사용자가 볼 수 있는 여러가지 요소들을 뜻합니다. 컴포넌트는 props를 받아서 elelement를 출력하는 함수와 같습니다. 이러한 컴포넌트를 선언하는 방식으로는 두가지가 있습니다. 바로 함수형 컴포넌트와 클래스형 컴포넌트! 과연 둘은 어떤 차이가 있고, 어떤 기준으로 사용할 컴포넌트를 정하는게 좋을까요? 저는 이에 대한 내용을 '리액트를 다루는 기술' 책과 리액트 공식문서를 사용하여 공부했습니다. (ko.reactjs.org/docs/components-and-props.html#function-and-class-components) 제가 이해한 개념을 쓰는 것이기 때문에, 틀릴 수도 있다는 점! ✔코드비교 //함.. 2020. 12. 29.

이전 1 2 3 4 5 6 다음

티스토리툴바