react

반려 동물 특화 SNS 개발로 프로젝트 주제를 정했다. 평소 SNS에 피로감을 느끼고 있었고, 마침 프로젝트 팀원의 반려동물이 팀 내에서 인기 스타였기 때문에 자연스럽게 반려동물 관련된 웹 소셜 네트워크로 주제가 정해지게 되었다. 이번 프로젝트는 기록을 많이 남겨봐야지. 가장 먼저 만난 이슈는 라우팅 처리였다. 이번 프로젝트에서는 빈 페이지가 안보이게 에러 페이지도 처리하고자 했다. 우선 피그마로 디자인을 짜봤다. 지정되지 않은 경로는 function App() { return ( ); } export default App; *을 이용하여 처리해 줄 수 있다.

리엑트에서 Select 문을 사용하는 방법을 알아보자. 선택지1 선택지2 빌트인 브라우저 컴포넌트를 이용할 수 있다. 선택리스트는 옵션으로 추가가 가능하다. export default function Picker() { return ( 휴대폰 기종을 선택하세요 iOS Android ); } value 값으로 선택된 값을 전달 가능하다. onChange 함수를 적용해서 선택한 값을 업데이트 가능하다. export default function FruitPicker() { const [selectedFruit, setSelectedFruit] = useState('orange'); // useState를 사용해서 기본 값을 지정가능하다. return ( Pick a fruit: setSelectedFruit..

useNavigate() 함수를 이용해서 페이징 처리하는 부분을 정리한다. const nav = useNavigate(); const onClick = () => { nav("/search"); } return ( 서치 페이지로 이동 ) 리엑트에서 동적 파라메터를 넘기는 방법은 useSearchParams 와 useParams를 이용할 수 있다. // path 페이징 처리 // 인자로 받아오게 처리

리액트 네이티브를 이용하여 안드로이드와 IOS 를 둘 다 지원하는 크로스플랫폼 TodoList를 만들어 보았다. 기존 어플리케이션과 차별화되는 점으로 OO의 성장일기 라고 헤더 타이틀을 지어 보았고, 매일 케어 해야하는 목록들을 신규 작성하거나, 삭제 할수 있으며, 해당 내용을 완료했을 경우 체크 표시까지 기능을 넣어 보았다. React 와 조금 다르게 접근하여 데이터를 불러오는 과정이 필요해서, 한번 헤맸지만 구글 신의 도움으로 모달창에서도 입력받아 신규 목록을 넣어 줄 수 있다. React Native에서는 변경되는 입력값들을 아래와 같이 가지고 올 수 있다. setContent(e.nativeEvent.text); 추가적으로 사진기능과, 검색기능도 넣어봤는데 아직 상세 페이지는 없어서, 페이징 단위..