(React) useState 값 변경

1. 독립변수 

•  선언

const [value, setValue] = useState(0);

• 새로운 값을 설정

<button onClick={() => setValue(3)}>click</button>

•  기존 값을 변경

<button onClick={() => setValue(prev => prev + 1)}>click</button>

 

2. 리스트 변수

• 선언

const [value, setValue] = React.useState(["a", "b", "c"]);

 

• 초기화 

<button onClick={() => setValue([ ])}>click</button>

 

• 값 추가

<button onClick={() => setValue(prev => [...prev, "d"])}>click</button>

 

• 특정값 삭제

<button onClick={() => setValue(prev => prev.filter(item => item !== "a"))}>click</button>

 

• 특정 인덱스 삭제

<button onClick={() => setValue(prev => prev.filter((item, index) => index !== 0))}>click</button>

 

3. dictionary  변수

• 선언

const [value, setValue] = useState( {     contury: "usa",     alphabet: ["a", "b", "c"] });

• alphabet 추가

<button onClick={() => setValue( prev => ( {...prev, alphabet: [...prev.alphabet, "d"] } ) ) }>click</button>

 

• alphabet 에서 index 로 제거

<button onClick={ () =>  setValue( prev => ( {...prev, alphabet: prev.alphabet.filter((val, i) => i !== 0) } ) ) }>click</button>

 

• alphabet 에서 특정값으로 제거

<button onClick={ () =>  setValue( prev => ({...prev, alphabet: prev.alphabet.filter((val, i) => val !== "a") }) ) }>click</button>

 

• alphabet 에서 특정값을 변경

<button onClick={ () => setValue(

                 prev => ({...prev, alphabet: prev.alphabet.map((val, i)=> (val==="c")? "f" : val )})) }>click</button>