Rainyjune Blog

일반적으로 게시판, 쇼핑몰 목록 등의 경우 각 항목에 대한 제목을 클릭한 경우 해당 하위 카테고리 url에 해당 항목에 대한 id로 페이지 url이 구성된다. 이처럼 id별로 페이지 url을 따기 위해 사용하는 것이 URL Parameter이다. // detail 카테고리에 id별 url을 route하는 경우 path에 :param_name을 지정해주면 해당 param_name으로 url이 구성된다. 위 예제에서는 /detail/id 를 호출하면 DetailPage 컴포넌트를 호출하게 된다. DetailPage 컴포넌트에서는 호출된 url parameter에 따라 요청된 정보를 보여준다. function DetailPage (props) { // useParams를 통해 URL Parameter 값을 파..

Navigate let navigate = useNavigate(); https://reactrouter.com/en/main/hooks/use-navigate react router dom에서 제공하는 페이지 이동 관련 함수 집합. onClick 이벤트 핸들러에서 navigate('url')을 호출하면 클릭시 해당 url로 페이지를 이동한다. { navigate('/detail')}}> ... 404 Page Routes에 지정해주지 않은 주소로 접근시 404 Page를 띄우고 싶은 경우 * 표시가 Route에 지정되지 않은 나머지 모든 주소를 의미한다. Nested Routes 하나의 페이지 내 하위 페이지를 보여줄 때 사용하는 방법. // 실제 주소는 /about/about_low가 된다. Rout..

React는 기본적으로 Single Page Application이므로 하나의 페이지에서 여러개의 컴포넌트를 보여주는 방식을 채택한다. (보여주는 페이지는 index.html 하나) 즉, url의 하위 주소를 호출하면 해당 page를 불러오는 것이 하닌 해당 url에 해당하는 component를 보여주도록 한다. React Router Dom 보여주고자 하는 페이지 컴포넌트를 일일이 구현하는 것이 아니라 React Router Dom 라이브러리를 사용하여 페이지 컴포넌트를 구현한다. Terminal에서 npm install react-router-dom@6 을 입력한다. (React Router Dom v6 설치) index.js에 component 호출부를 component로 감싼다. (자동으로 imp..

JavaScript에서 타 파일의 내용을 참조해야하는 경우 import/export 문법을 사용한다. Import 타 파일에서 export된 항목에 대해 접근할 수 있도록 한다. Export 타 파일에서 import 할 수 있도록 접근 가능한 대상을 지정한다. // export 예제 let data = [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", pri..

이미지 파일 등의 외부 리소스 파일을 참조하기 위해서는 해당 파일의 경로를 지정해줘야 한다. src 폴더 내 파일 참조 /* CSS에서 src 폴더 내 background image 를 참조 */ .class-name { background-image: url(./bg.png); } // App.js(HTML)에서 참조 import imgSourceName from './bg.png'; // 참조 대상 경로를 참조명으로 import 한다. ... PUBLIC 폴더 내 참조 // 사용법 // 권장 사용법 - 서브 주소에 배포하는 경우 정상적으로 표현되지 않는 경우가 있기 때문. src/PUBLIC src는 build시 html, js, css로 컴파일할 때 되는데, PUBLIC은 컴파일 대상이 아니라 co..

React Bootstrap 이란? Bootstrap을 React에서 사용하는 것으로, HTML요소를 디자인하기 간편하도록 해준다. 설치 // Bootstrap을 사용하려는 프로젝트 폴더에서 실행 > npm install react-bootstrap bootstrap React 프로젝트에 적용 https://react-bootstrap.netlify.app/getting-started/introduction 1.App.js에 적용 - App.js에 아래와 같이 import 해준다. import 'bootstrap/dis/css/bootstrap.min.css'; 2.index.html에 적용 - index.html에 아래 내용을 import 해준다. Navbar 적용해보기 https://react-boo..

React component는 Class 형식으로도 사용할 수 있다. (최신 버전에서는 function 형태를 권장한다고 함) class ClassName extends Component { // constructor와 constructor 내 super() 호출, render()는 필수 constructor(props) { // props를 선언 super(props); this.state = {// state 선언. let [state1] = useState(...) state1 : ..., state2 : ... } } render() { return ( ... ... this.setState({ state1 : ... }); // state 변경 setState(...) ) } }

Input Tag 활용 Input tag(input, textarea, select, ...) 사용시 tag 내 값을 다루기 위해 event handler를 사용한다. onChange 이벤트를 사용하는 예제는 아래와 같다. let [inputTagValue, setInputTagValue] = useState(''); // inputTagValue state 정의 ... // e : EventArg // e.Target : 이벤트 호출자. 여기에선 input tag // e.Target.Value : 이벤트 호출자의 값. 여기서는 input tag에 기록된 value { setInputTagValue(e.Target.Value); } }/> 이벤트 버블링 위와 같이 HTML이 정의된 경우 span을 cl..

https://ko.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org Props? Props는 부모 컴포넌트에서 자식 컴포넌트로 state를 전달할 수 있는 문법이다. JavaScript 함수의 parameter 역할과 같다고 볼 수 있다. // 컴포넌트에 prop를 전달하는 방법 // 부모 컴포넌트로부터 전달받은 props를 사용하는 방법 Function ComponentName(props) { return( ... { props.propName } ); } props는 일반적인 state일 수도 있고, 함수일 수도..

JavaScript에서의 map() Array에서 map method는 array 요소만큼 반복하여 map method 영역에 기술된 callback 함수를 반복한다. map method 예제 let arrTest = [1, 2, 3]; let newValue = 4; // map은 arrTest 내용을 반복탐색하며 callback 함수를 호출한다. // parameter는 2개를 첫 번째 parameter는 arrTest의 값, 두 번째 parameter는 현재 반복문 실행 Index를 나타낸다. arrTest.map( (val, arrIdx) => { console.log(`value:${val}, Index:${arrIdx}`); // value:1, idx:0 // value:2, idx:1 //..