리액트 기초 / 터미널 명령어
리액트는 사용자정의 태그를 만드는 본질이다.
(컴포넌트를 이야기하는것)
npx create-react-app 프로젝트이름 .
- 점 하나만 적을시 그폴더에 만듬.
npm run build
- 배포용 파일로 변환 시킨다.
npx serve -s build
- 배포용 파일 index 파일을 서브서버로 열기.
props 기초
const Header = (props) =>{
return(
<header>
<h1><a href="/">{props.title}</a></h1>
</header>
)
function App() {
return (
<div className="App">
<Header title="REACT"/>
<Nav/>
<Article/>
</div>
);
}
데이터 가져다 쓰기 = topics
function App() {
const topics = [
{id:1, title:'html', body:'html is...'}
{id:2, title:'css', body:'css is...'}
{id:3, title:'js', body:'javascript is...'}
]
return (
<div className="App">
<Header title="REACT"/>
<Nav topics={topics}/>
<Article title="Welcome" body="Hello, WEB"/>
</div>
);
}
]
데이터를 Nav 컴포넌트로 받은후에 사용하기 (맵함수사용)
const Nav = ({topics}) => {
return(
<nav>
<ol>
{topics.map(r => (<li key={r.id}><a href={'/read/'+r.id}>{r.title}</a></li>))}
</ol>
</nav>
)
}
이벤트 만들기 약간 복잡한버전. (Header)
function App() {
const topics = [
{id:1, title:'html', body:'html is...'},
{id:2, title:'css', body:'css is...'},
{id:3, title:'js', body:'javascript is...'},
{id:4, title:'harim', body:'프론트가즈아...'}
]
return (
<div className="App">
<Header onChangeMode={()=>{
alert("경고");
}} title="REACT"/>
<Nav topics={topics}/>
<Article title="Welcome" body="Hello, WEB"/>
</div>
);
}
Header 컴포넌트
const Header = (props) =>{
return(
<header>
<h1><a href="/" onClick={(e)=>{
e.preventDefault()
props.onChangeMode()
}}>{props.title}</a></h1>
</header>
)
}
e.preventDefault() 페이지 리로드를 막는함수
props.onChangeMode() 데이터 불러오기
() 괄호를 붙이는 이유는 모드쪽에 함수를 만들어둬서 함수를 불러와야함.
()괄호의 의미는 함수를 실행하겠다는 의미.
Nav 이벤트 만들기 불러오는 아이디값 다르게하기
<div className="App">
<Header onChangeMode={()=>{
alert("경고");
}} title="REACT"/>
<Nav topics={topics} onChangeMode={(id)=>{
alert(id);
}}/>
<Article title="Welcome" body="Hello, WEB"/>
</div>
Nva 의 onChangeMode 함수에 파라미터값을 준다.
const Nav = ({topics,onChangeMode}) => {
return(
<nav>
<ol>
{topics.map(r => (<li key={r.id}>
<a id={r.id} href={'/read/'+r.id}
onClick={(e)=>{
e.preventDefault()
onChangeMode(e.target.id)}
}>{r.title}
</a>
</li>))}
</ol>
</nav>
)
}
e.preventDefault() 로 리로드를 막고
a 태그에 id값을 넣어서 만들고.
onChangeMode 함수를 받아 사용하여.
괄호안에 클릭한 타겟의(e.target.id) 아이디값을 가져온다.
그러면 클릭하는 아이디의 따라 다르게 불려와진다.
생활코딩 리액트 2022 기초 입문 영상을 보고 제작하였습니다.
전체코드
import './App.css';
const Header = (props) =>{
return(
<header>
<h1>
<a href="/" onClick={(e)=>{
e.preventDefault()
props.onChangeMode()
}}>{props.title}</a>
</h1>
</header>
)
}
const Nav = ({topics,onChangeMode}) => {
return(
<nav>
<ol>
{topics.map(item => (<li key={item.id}>
<a id={item.id} href={'/read/'+item.id}
onClick={(e)=>{
e.preventDefault()
onChangeMode(e.target.id)}
}>{item.title}
</a>
</li>))}
</ol>
</nav>
)
}
const Article = (props) =>{
return(
<article>
<h2>{props.title}</h2>
{props.body}
</article>
)
}
function App() {
const topics = [
{id:1, title:'html', body:'html is...'},
{id:2, title:'css', body:'css is...'},
{id:3, title:'js', body:'javascript is...'},
{id:4, title:'harim', body:'프론트가즈아...'}
]
return (
<div className="App">
<Header onChangeMode={()=>{
alert("경고");
}} title="REACT"/>
<Nav topics={topics} onChangeMode={(id)=>{
alert(id);
}}/>
<Article title="Welcome" body="Hello, WEB"/>
</div>
);
}
export default App;
Author And Source
이 문제에 관하여(리액트 기초 / 터미널 명령어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zing105/리액트-기초-터미널-명령어저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)